如何理解指令的“终端"? [英] How to understand the `terminal` of directive?

问题描述

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

<块引用>

指令定义对象

终端

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

我不太明白.当前优先级是什么意思?如果有这样的指令:

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

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

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

<div 指令1 指令2 指令3 指令4 指令5></div>

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

解决方案

优先级

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

终端

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

</div>，它们只会相互影响.

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

myModule.directive('myDirective1', function() {返回 {优先级:1，终端:假，链接:函数(){console.log("我是 myDirective1");}}});myModule.directive('myDirective2', function() {返回 {优先级:10，终端:真的，链接:函数(){console.log("我是 myDirective2");}}});myModule.directive('myDirective3', function() {返回 {优先级:100，终端:假，链接:函数(){console.log("我是 myDirective3");}}});

为此，您只会在控制台中看到我是 myDirective2"和我是 myDirective3".

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

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

原帖

在您的示例中，只有优先级为 100 和 1000 的指令会被应用，因为优先级较高的指令会首先应用，因此优先级为 1000 的指令将首先应用.

在这种情况下，如果您有两个优先级为 100 的指令，则它们都将被应用，因为具有相同优先级的指令的顺序未定义.

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

In this page: http://docs.angularjs.org/guide/directive

Directive Definition Object

terminal

If set to true then the current priority will be the last set of directives which will execute (any directives at the current priority will still execute as the order of execution on same priority is undefined).

I don't understand it well. What does current priority mean? If there are such directives:

1. directive1 with { priority: 1, terminal: false}
2. directive2 with { priority: 10, terminal: false}
3. directive3 with { priority: 100, terminal: false}
4. directive4 with { priority: 100, terminal: true} // this is true
5. directive5 with { priority: 1000, terminal: false}

Please note the directive4 has terminal:true and others have false.

If there is a html tag has all of the 5 directives:

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

What's the execution order of the 5 directives?

解决方案

Priority

The priority is only relevant when you have multiple directives on one element. The priority determines in what order those directives will be applied/started. In most cases you wouldn't need a priority, but sometimes when you use the compile function, you want to make sure that your compile function runs first.

Terminal

The terminal property is also only relevant for directives that are on the same HTML element. That is, if you have <div my-directive1></div> <div my-directive2></div>, priority and terminal in your directives my-directive1 and my-directive2 won't affect each other. They will only affect each other if you have <div my-directive1 my-directive2></div>.

The terminal property tells Angular to skip all directives on that element that comes after it (lower priority). So this code might clear it up:

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

For this, you'd only see "I'm myDirective2" and "I'm myDirective3" in the console.

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

But for this, you'd see "I'm myDirective1" as well, since they are on different elements.

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

Original post

In your example the directives with priority 100 and 1000 are the only ones that will get applied, since a directive with higher priority are applied first, so the one with priority 1000 will be applied first.

If you have two directives with priority 100 in this case, both of them will be applied because the order of directives with the same priority is undefined.

Note that this only applies to directives that are on the same element.

这篇关于如何理解指令的“终端"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！