AngularJS中多个属性指令的编译和链接顺序？

Question

假设我有两个属性指令叫myFoo和myBar.这些指令定义为restrict: 'A'.

然后我有一个元素

<div my-foo my-bar></div>

编译/链接函数的调用顺序是什么？my-foo在编译之前是否始终调用my-bar编译？

Answer 1

除了@ valepu之外,这里priority还有DDO(指令定义对象)属性的描述:

TL; DR默认值priority是0,如果您希望更改元素编译的顺序,则必须增加priority元素的元素.

当在单个DOM元素上定义了多个指令时,有时需要指定应用指令的顺序.优先级用于在调用编译函数之前对指令进行排序.优先级定义为数字.首先编译具有更高数字优先级的指令.预链接功能也按优先级顺序运行,但后链接功能以相反的顺序运行.具有相同优先级的指令的顺序是未定义的.默认优先级为0.

在您的情况下,如果您没有priority为您的指令指定,my-bar将首先编译,然后编译my-foo.但是,请注意控制器首先被初始化,然后pre是post链接函数.此外,顺序在这里很重要:Angular交替编译指令.以下是我的console.log打印,显示了这个过程:

bar controller
foo controller
pre bar
pre foo
post foo
post bar

如果你想玩,我已经设置了一个Plunker.

现在,如果您更改为priority,priority: 1您将获得以下输出:

foo controller
bar controller
pre foo
pre bar 
post bar
post foo

正如您所看到的,它始于myFoo并继续myBar.所以myFoo现在有更高的优先级.

更新1

题:

你如何处理静坐,其中两个不同的供应商指令(A和B)相互依赖,执行的顺序很重要？是否可以在不改变vedor设置的情况下进行？

我建议实现一个装饰器,如下所示:

app.config(function($provide) {
    $provide.decorator('myFooDirective', function($delegate) {
        var directive = $delegate[0];
        directive.priority = 9;
        return $delegate;
    });
});

通常,装饰器拦截服务的创建,允许它覆盖或修改服务的行为.但是,您也可以如上所示装饰您的指令.在装饰器中,您可以根据需要设置优先级以影响执行顺序.据我所知,priority属性是控制指令应用顺序的唯一方法.使用装饰器时,您可以修改/覆盖priority属性,但不能直接修改它的设置,以防您不想使用DDO.

上面的Plunker也使用装饰器实现进行了更新.