一尘不染

如何理解指令的“终端”?

angularjs

在此页面中:http :
//docs.angularjs.org/guide/directive

指令定义对象

终奌站

如果设置为true,则当前优先级将是将要执行的最后一组指令(由于未定义在相同优先级上的执行顺序,因此当前优先级的任何指令仍将执行)。

我不太了解。什么current priority意思 如果有这样的指令:

  1. 具有{优先级:1,终端:false}的指令1
  2. 带{优先级:10,终端:false}的指令2
  3. 指令3,{优先级:100,终端:false}
  4. 带{优先级:100,终端:true}的指令4 //这是真的
  5. 指令5,{优先级:1000,终端:false}

请注意directive4拥有terminal:true和其他false

如果有html标记,则具有所有5条指令:

<div directive1 directive2 directive3 directive4 directive5></div>

这5个指令的执行顺序是什么?


阅读 352

收藏
2020-07-04

共1个答案

一尘不染

优先

仅当在一个元素上有多个指令时,优先级才有意义。优先级确定将以什么顺序应用/启动这些指令。在大多数情况下,您不需要优先级,但是有时在使用编译功能时,您需要确保编译功能先运行。

终奌站

terminal属性也仅与相同HTML元素上的指令相关。也就是说,如果你有<div my-directive1></div> <div my- directive2></div>priorityterminal在你的指令my-directive1,并my- directive2不会互相影响。他们只会互相影响,如果你有<div my-directive1 my-directive2></div>

terminal属性告诉Angular跳过该元素后面的所有指令(优先级较低)。因此,这段代码可能会清除它:

myModule.directive('myDirective1', function() {
    return {
        priority: 1,
        terminal: false,
        link: function() {
            console.log("I'm myDirective1");
        }
    }
});

myModule.directive('myDirective2', function() {
    return {
        priority: 10,
        terminal: true,
        link: function() {
            console.log("I'm myDirective2");
        }
    }
});

myModule.directive('myDirective3', function() {
    return {
        priority: 100,
        terminal: false,
        link: function() {
            console.log("I'm myDirective3");
        }
    }
});

为此,您只会在控制台中看到“我是myDirective2”和“我是myDirective3”。

<div my-directive1 my-directive2 my-directive3></div>

但是为此,您也会看到“我是myDirective1”,因为它们位于不同的元素上。

<div my-directive1></div>
<div my-directive2></div>
<div my-directive3></div>

原始帖子

在您的示例中,将仅应用优先级为100和1000的指令,因为优先级更高的指令将首先被应用,因此优先级为1000的指令将首先被应用。

如果在这种情况下,您有两个优先级为100的指令,则将同时应用这两个指令,因为具有相同优先级的指令的顺序未定义。

请注意,这仅适用于同一元素上的指令。

2020-07-04