假设我有一个名为<my-directive>
的工作指令。它做了一些html渲染和事件处理,经过全面测试。
现在我想用另一个包装器指令<wrapper>
包装这个指令,它将呈现这个html片段<div class="my-div">
,这样我就可以编写这样的代码:
<wrapper>
<my-directive></my-directive>
</wrapper>
并且:
<div class="my-div">
<my-directive></my-directive>
</div>
怎么能实现呢?我之前尝试了一些方法,它们似乎都没有工作,所以我没有发布任何代码。
答案 0 :(得分:27)
您可以创建像
这样的包装器指令app.directive('wrapper', function() {
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div class="my-div" ng-transclude></div>'
};
});
演示:Plunker
答案 1 :(得分:19)
听起来你在外部模板中缺少ng-transclude
并且在外部指令中设置transclude
true。 ng-transclude
属性告诉编译器在transclude
设置为true
时插入内部html
app.directive('wrapper',function(){
return {
restrict:'E',
template: '<div>Outer wrapper text<div ng-transclude></div></div>',
transclude: true,
replace:true
}
});