Question

我正在尝试将指令包装在另一个指令中，并且遇到了问题。例如，使用UI Bootstrap选项卡和窗格指令：

我想转过头：

<tabs>
    <pane heading="FOO">...</pane>
    <pane heading="BAR">...</pane>
</tabs>

in to：

<tabs>
    <pane-wrapper heading="FOO">...</pane-wrapper>
    <pane-wrapper heading="BAR">...</pane-wrapper>
</tabs>

其中pane-wrapper指令如下所示：

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=''>

思想？

我不需要创建一个窗格包装器范围吗？有一个包含各种数据的父作用域...我只想包装它并创建一个可重用的组件。

Answer 1

您是否尝试过使用

iElement.html($compile(<pane..)(scope));

删除模板属性并依赖于编译<pane>并直接更新iElement html。

您可能希望在包装器指令中使用replace: true属性。

尝试将angular指令包装在另一个指令中

1 个答案: