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

Question

在本页：http://docs.angularjs.org/guide/directive

指令定义对象

终端

如果设置为 true，则当前优先级将是最后一组将执行的指令（当前优先级的任何指令仍将执行，因为相同优先级的执行顺序未定义）。

我不太明白。 current priority 是什么意思？如果有这样的指令：

1. directive1 {优先级：1，终端：false}
2. directive2 {优先级：10，终端：false}
3. directive3 {优先级：100，终端：false}
4. directive4 with { priority: 100, terminal: true} // 这是真的
5. directive5 {优先级：1000，终端：false}

请注意directive4 有terminal:true，其他有false。

如果有一个html标签有所有5条指令：

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

这5条指令的执行顺序是什么？

Answer 1

优先级

仅当您在一个元素上有多个指令时，优先级才相关。优先级决定了这些指令的应用/启动顺序。在大多数情况下您不需要优先级，但有时当您使用 compile 函数时，您希望确保您的 compile 函数首先运行。

终端

终端属性也只与同一 HTML 元素上的指令相关。也就是说，如果您的指令中有<div my-directive1></div> <div my-directive2></div>、priority 和terminal，my-directive1 和my-directive2 不会相互影响。如果你有<div my-directive1 my-directive2></div>，它们只会相互影响。

终端属性告诉 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");
        }
    }
});

为此，您只会在控制台中看到“I'm myDirective2”和“I'm myDirective3”。

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

但为此，您也会看到“I'm myDirective1”，因为它们位于不同的元素上。

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

原帖

在您的示例中，优先级为 100 和 1000 的指令是唯一将被应用的指令，因为优先级较高的指令首先应用，所以优先级为 1000 的指令将首先应用。

如果在这种情况下你有两个优先级为 100 的指令，它们都会被应用，因为具有相同优先级的指令的顺序是不确定的。

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