[英]How to use component's insideHTML in the component template?
I'm trying to learn about components.我正在尝试了解组件。 I have a component like this:
我有一个这样的组件:
app.component('modal', {
templateUrl: 'components/modal.html',
bindings: {
show: '<',
title: '@',
},
controller: function () {}
});
This is how I use it:这是我如何使用它:
<modal show="true" title="Create Campaign">Testing.</modal>
The component's content is: Testing.该组件的内容是:测试。
And the template:和模板:
<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>
How I put the component's innerHTML (Testing.) to the inside of .modal__content div?我如何将组件的innerHTML(测试。)放在 .modal__content div 的内部?
Maybe ıt can be something like:也许可以是这样的:
<div class="modal__content">{{ $ctrl.body }}</div>
Use transclude
option:使用
transclude
选项:
app.component('modal', {
transclude: true,
templateUrl: 'components/modal.html',
bindings: {
show: '<',
title: '@',
},
controller: function () {}
});
In html add ng-transclude
where you want the content to be added:在 html 中添加
ng-transclude
您想要添加内容的位置:
<div class="modal__content" ng-transclude></div>
Read more here: https://docs.angularjs.org/guide/component在此处阅读更多信息: https : //docs.angularjs.org/guide/component
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.