1

我正在尝试将指令包装在另一个指令中，并且遇到了问题。例如，使用 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=''>

想法？

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

4

1 回答 1

0

您是否尝试过使用

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

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

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

于 2013-03-27T21:43:41.633 回答