指令内的指令链接功能同步答案

【问题标题】：Directive inside directive link functions sync指令内的指令链接功能同步
【发布时间】：2016-12-23 19:04:14
【问题描述】：

我有一个在链接函数中操纵 Dom 的指令。在其中的另一个指令，我需要在父指令完成其 Dom 操作后触发其链接功能。例如，我在父链接函数中为范围分配了属性，但在子指令中，范围没有这些属性（范围不是孤立的，我需要修改链接函数中的范围，以便我可以访问元素）

【问题讨论】：

标签： angularjs

【解决方案1】：

对于指令，link（与post-link 相同）函数的执行顺序是相反的。这意味着对于以下场景：
<span l1-dir><span l2-dir></span></span>
先调用子指令的链接函数，再调用父指令链接。我们很幸运，因为我们还有pre-link 函数，它是按照指令定义的顺序调用的。
在我们的例子中，第一个指令的 pre-link 函数被调用，然后是第二个指令的 pre-link 函数。
您可以将 DOM 操作逻辑从 pre-link 函数中的父指令移动（首先分为 pre 和 post）：

return {
        restrict: 'A', 
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {  //parent directive logic for DOM manipulation 
                },
                post: //nothing 
            }
        }

这可确保在子指令的 post-link 部分中，您对父指令的 DOM 操作将完成。

【讨论】：

【解决方案2】：

只需将 ng-if 添加到您的子指令中，并在“父”指令中的 0 处的 $timeout 完成后将其设置为 true，如下所示：

/*above should be placed all your parent directive link function code... the $timeout should be 
executed after your parent directive code*/
$timeout(function(){
    showChildDirective = "true";
}, 0);

这样，您将执行父指令的所有任务（$timeout 将放置在链接函数的底部），您将能够等待下一个 $digest 循环完成，所以你对 DOM 的所有绑定都将完成。

【讨论】：