[英]How to access inner directives of the directive
I've directives container
and item
. 我有指令container
和item
。
directive('container', function(){
return {
replace: true,
template: "<div>contains <p>...</p> </div>'
}
});
directive('item', function(){
return {
replace: true,
template: "item"
}
});
They are supposed to be used like this: 它们应该这样使用:
<container>
<item>
<item>
<item>
</container>
Expected output html: 预期输出html:
<div>contains <p>item item item </p> </div>
How to take item
directives from container
content and render them as repeatable directive in place of ...
at container template? 如何从container
内容中获取item
指令并将其呈现为可重复的指令,以代替容器模板中的...
?
Since directive templates must have exactly one html root element, template: "item"
is not valid. 由于指令模板必须仅具有一个html根元素,因此template: "item"
无效。 It has to be at least something like template: '<span>item</span>'
, which produces: 它至少必须类似于template: '<span>item</span>'
,该template: '<span>item</span>'
会产生:
<div>
contains
<p>
<span>item</span>
<span>item</span>
<span>item</span>
</p>
</div>
The two directives are: 这两个指令是:
app.directive('container', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div>contains <p ng-transclude></p></div>'
};
});
app.directive('item', function() {
return {
restrict: 'E',
replace: true,
template: '<span>item</span>'
};
});
Use the transclude: true
option : 使用transclude: true
选项:
directive('container', function(){
return {
replace: true,
transclude: true,
template: "<div>contains <p ng-transculde></p> </div>'
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.