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

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

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

How to use component's insideHTML in the component template?

angularjs

angularjs-components