angularjs – 如何理解指令的`terminal’?

前端之家收集整理的这篇文章主要介绍了angularjs – 如何理解指令的`terminal’?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在此页: 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).

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

> directive1 with {priority:1,terminal:false}
> directive2 with {priority:10,terminal:false}
> directive3 with {priority:100,terminal:false}
> directive4 with {priority:100,terminal:true} //这是真的
> directive5 with {priority:1000,terminal:false}

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

如果有一个html标签具有所有的5个指令:

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

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

优先

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

终奌站

终端属性也只与同一HTML元素上的指令相关。也就是说,如果您有< div my-directive1>< / div> < div my-directive2>< / div>,指令中的优先级和终端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,link: function() {
            console.log("I'm myDirective3");
        }
    }
});

为此,您只会在控制台中看到“I’m myDirective2”和“I’m 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的指令,则将应用这两个指令,因为具有相同优先级的指令的顺序未定义。

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

猜你在找的Angularjs相关文章