Angularjs多次使用相同的指令作为元素执行顺序

Question

我在视图中多次使用指令作为元素。

此指令的执行不是从父级开始的。它首先执行子指令，然后执行父指令。因此，当parent最终执行时，通过编译它，childs将被执行两次。

代码如下：

<custom-directive dir-type="1">
   <custom-directive dir-type="2"></custom-directive>
   <custom-directive dir-type="3"></custom-directive>
   <custom-directive dir-type="4"></custom-directive>
</custom-directive>

在这里，类型1指令在所有子级执行完成后开始执行。因此，当父指令类型1执行时，我编译它是自定义的html (比如uib-set)。所以这些子指令也会再次编译。

所以请告诉我怎样才能先执行parent指令，然后再执行childs指令…

Answer 1

它看起来不是很漂亮，但可以通过使用以下命令轻松解决：

<custom-directive dir-type="1" ng-init="myTurn = true">
   <custom-directive dir-type="2" ng-if="myTurn"></custom-directive>
   <custom-directive dir-type="3" ng-if="myTurn"></custom-directive>
   <custom-directive dir-type="4" ng-if="myTurn"></custom-directive>
</custom-directive>

现在，在父指令被编译和准备好之后，将触发/编译子指令。

然而，我认为这可以通过使用transclusion来解决。

也许您可以尝试将以下内容添加到指令中：

app.directive('customDirective', function() {
    return {
        //
        transclude: true,
        // 
    }
});

通过使用转置，您可以“告诉”父元素：“嘿，您有子元素”。因此Angular知道子元素属于父元素，它们将(我认为)等待父元素被编译。

如果此转换有效，请不要使用第一种解决方案。最好避免使用ng-init:它会使调试变得更加困难。

Documentation on transclusion