如何在子指令之前执行父指令？

Question

我正在寻找两个角度指令,一个父指令和一个子指令,来创建可排序和可复制的小部件.预期的标记是:

<div class="widget-container" data-sortable-widgets>
      <section class="widget" data-cloneable-widget></section>
<div>

但是,child指令似乎在父元素之前执行,在某个元素可用之前(由父元素添加):

function SortableWidgetsDirective() {
    return {
        priority: 200,
        restrict: 'A',
        link: function ($scope, element, attrs) {
            element.find(".widget header").append($("<div class='widget-controls'></div>"));
            element.sortable({  });
        }
    };
}

function CloneableWidgetDirective() {
    return {
        priority: 100,
        restrict: 'A',
        link: function ($scope, element, attrs) {
            // This directive wrongfully executes first so widget-controls is no available
            element.find("header .widget-controls").append($("<div class='clone-handle'></div>"));
        }
    };
}

正如你所看到我尝试设置优先级但我认为因为它们在不同的元素上,它不起作用.

如何让父项先执行？

Answer 1

推理

postLink()以相反的顺序执行,这意味着postLink()将在父代之前调用子指令(即深度优先).出于某种原因,这是默认行为(link()实际上是指postLink()).幸运的是我们也有preLink(),反之亦然- 我们可以利用它来实现我们的利益.

为了说明这一点 - 以下代码片段:

app.directive('parent', function($log) {
    return {
        restrict: 'E',
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {
                    $log.info('parent pre');
                },
                post: function postLink(scope, iElement, iAttrs, controller) {
                    $log.info('parent post');
                }
            }
        }
    };
});

app.directive('child', function($log) {
    return {
        restrict: 'E',
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {
                    $log.info('child pre');
                },
                post: function postLink(scope, iElement, iAttrs, controller) {
                    $log.info('child post');
                }
            }
        }
    };
});

...将输出以下内容:

> parent pre
> child pre
> child post
> parent post 

看到它live on plunker.

解

如果我们希望在子代之前执行父指令的逻辑,我们将明确使用preLink():

function SortableWidgetsDirective() {
    return {
        restrict: 'A',
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {
                    iElement.find(".widget header").append($("<div class='widget-controls'></div>"));
                    iElement.sortable({});
                },
                post: angular.noop
            }
        }
    };
}

function CloneableWidgetDirective() {
    return {
        restrict: 'A',
        compile: function compile(tElement, tAttrs, transclude) {
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {
                    iElement.find("header .widget-controls").append($("<div class='clone-handle'></div>"));
                },
                post: angular.noop
            }
        }
    };
}

参考

• $compile AngularJS文档上的服务.

Post Scriptum

• 顺便说一句,你是正确的 - priority用于与共享相同元素的指令一起使用.

• angular.noop只是一个没有返回任何内容的空方法.如果您仍想使用这些postLink()函数,只需放置函数声明,就像通常那样,即:

  post: function postLink(scope, iElement, iAttrs, controller) { ... }
  

• 使用templateUrl,因为"因为模板加载是异步的,所以编译/链接暂停,直到模板加载" ^[source].结果,执行顺序将被中断.您可以通过在template属性中包含内联模板来解决此问题.