我正在尝试将指令包装在另一个指令中,并且遇到了问题。例如,使用 UI Bootstrap 选项卡和窗格指令:
我想变成这样的东西:
<tabs>
<pane heading="FOO">...</pane>
<pane heading="BAR">...</pane>
</tabs>
进入:
<tabs>
<pane-wrapper heading="FOO">...</pane-wrapper>
<pane-wrapper heading="BAR">...</pane-wrapper>
</tabs>
其中窗格包装器指令如下所示:
angular.module('test').directive('paneWrapper', function(){
return{
restrict: 'E',
replace: true,
template: "<pane ng-transclude></pane>" //somehow need to pass along the heading attribute
}
});
我想这样做的原因是,我不想大量修改窗格,我想包装它,并且可能在一个中包含多个指令等。我想我可以完全复制窗格指令并将其更改为一个选项。
无论如何,我得到了错误:
Error: Multiple directives [ngTransclude, ngTransclude] asking for 'ngTransclude' controller on <div class='tab-pane' ng-class='active: selected' ng-show='selected' ng-tranclude=''>
想法?
我不应该需要创建一个窗格包装器范围吗?有一个包含各种数据的父范围......我只想包装它并创建一个可重用的组件。