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

Question

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

此指令的执行不是从父指令开始的。它首先执行children指令然后执行parent指令。所以当父母最后执行时，通过编译它，孩子们会被执行两次。

代码如下：

<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）。所以这些子指令也会再次编译。

所以请帮助我如何先执行父指令，然后再执行孩子......

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,
        // 
    }
});

通过使用transclusion，您正在“告诉”父元素：“嘿，您有子元素”。所以Angular知道孩子属于父母，他们会（我认为）等待父元素被编译。

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

Documentation on transclusion