66

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

指令定义对象

终端

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

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

  1. 具有{优先级：1，终端：假}的指令1
  2. 具有{优先级：10，终端：假}的指令2
  3. 具有{优先级：100，终端：假}的指令3
  4. directive4 with { priority: 100, terminal: true} // 这是真的
  5. 具有{优先级：1000，终端：假}的指令5

请注意directive4hasterminal:true和 others have false。

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

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

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

4

1 回答 1

150

优先事项

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

终端

终端属性也只与同一 HTML 元素上的指令相关。也就是说，如果您有<div my-directive1></div> <div my-directive2></div>,priority并且terminal在您的指令中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");
        }
    }
});

为此，您只会在控制台中看到“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 的指令，则它们都将被应用，因为具有相同优先级的指令的顺序未定义。

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

于 2013-03-07T09:06:28.703 回答