如何在组件模板中使用组件的insideHTML？

Question

我正在尝试了解组件。我有一个像这样的组件：

app.component('modal', {
    templateUrl: 'components/modal.html',
    bindings: {
        show: '<',
        title: '@',
    },
    controller: function () {}
});

这是我的使用方式：

<modal show="true" title="Create Campaign">Testing.</modal>

该组件的内容是：测试。

和模板：

<div class="modal" ng-show="{{ $ctrl.show }}">
    <div class="modal__body">
        <div class="modal__header">
            {{ $ctrl.title }}
            <i class="fa fa-fw fa-close modal__close" data-action="close"></i>
        </div>
        <div class="modal__content"></div>

        <div class="modal__footer">
            <button class="button button--default button--ghost" data-action="close">Cancel</button>
            <button ng-disabled="!modal.createCampaign.name" class="button button--primary button--wide pull-right"
                type="submit">Create Campaign</button>
        </div>
    </div>
</div>

我如何将组件的innerHTML（Testing。）放在.modal__content div的内部？

也许我可以是这样的人：

<div class="modal__content">{{ $ctrl.body }}</div>

Answer 1

使用transclude选项：

app.component('modal', {
    transclude: true,
    templateUrl: 'components/modal.html',
    bindings: {
        show: '<',
        title: '@',
    },
    controller: function () {}
});

在html中添加ng-transclude，要在其中添加内容：

<div class="modal__content" ng-transclude></div>

在此处阅读更多：https://docs.angularjs.org/guide/component