如何孩子指令之前执行父指令？ [英] How to execute parent directive before child directive?

问题描述

我在找写两个角指令，父母和一个孩子的指令，创造排序和可复制的部件。预期的标记是：

I'm looking to write two angular directives, a parent and a child directive, to create sortable and cloneable widgets. The intended markup is:

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

然而，孩子似乎指令父之前执行，之前某元素可用（它由父加）：

However, the child directive seems to execute before the parent, before a certain element is available (its added by the parent):

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>"));
        }
    };
}

正如你可以看到我尝试设置优先级，但我认为，因为他们是在不同的元素，这是行不通的。

As you can see i tried setting priority but I think because they're on different elements, it does not work.

我怎样才能让家长先执行？

How can I make the parent execute first?

推荐答案

postLink（）以相反的顺序，这意味着子指令的 postLink（）将被调用之前被执行母公司（即深度优先）。出于某种原因，这是默认的行为（链接（）实际上是指 postLink（））。幸运的是，我们也有 $ P $砰砰（），其周围的工作另一种方式 - 我们可以利用这对我们有利。

Reasoning

postLink() is executed in reverse order, which means the child directive's postLink() will be called before the parent's (i.e. depth first). For some reason, this is the default behavior (link() actually refers to postLink()). Luckily we also have preLink(), which works the other way around - we can utilize that to our benefit.

要说明这一点 - code以下片段：

To illustrate this - the following snippet of code:

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');
                }
            }
        }
    };
});

＆hellip;将输出以下内容：

… will output the following:

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

看它 <大骨节病>住在plunker 。

如果我们想前孩子的要执行的指令父母的逻辑，我们将明确地用 $ P $砰砰（）：

If we want the parent directive's logic to be performed before the child's, we will explicitly use 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
            }
        }
    };
}

参考

• $编译 在AngularJS文档服务。





• 您是正确的，顺便说一句 - 优先级是为使用与共享相同的元素指令

• You are correct, by the way - priority is meant for use with directives that share the same element.

angular.noop 只是不返回任何内容的空方法。如果你仍然想使用 postLink（）功能，只需将函数声明，而不是，因为你通常会做的，即：

angular.noop is just an empty method that returns nothing. If you still want to use the postLink() functions, just place the function declaration instead, as you would normally do, i.e.:

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




• 要使用 templateUrl 的洁具，如的＆ldquo;因为模板加载是异步编译/链接暂停，直到模板被加载＆rdquo;的的^的 [来源] 。这样一来，执行的顺序将被打乱。您可以通过在模板内联模板解决这个问题属性。

• Be ware of the use of templateUrl, as “ Because the template loading is asynchronous the compilation/linking is suspended until the template is loaded ” ^[source]. As a result, the order of execution will be disrupted. You can remedy this by including the template inlined in the template property instead.

  这篇关于如何孩子指令之前执行父指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！