How to understand the `terminal` of directive?
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.
Comments
-
Freewind almost 2 years
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:- directive1 with { priority: 1, terminal: false}
- directive2 with { priority: 10, terminal: false}
- directive3 with { priority: 100, terminal: false}
- directive4 with { priority: 100, terminal: true} // this is true
- directive5 with { priority: 1000, terminal: false}
Please note the
directive4
hasterminal:true
and others havefalse
.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?
-
Freewind over 11 yearsThank you, but you didn't mention
terminal
(the directive4). And what's the order if a html tag has all of the 5 directives? -
Anders Ekdahl over 11 yearsI've updated my answer with some examples which hopefully clears things up.
-
Freewind over 11 yearsMuch clearer, thanks. And still a small question: What if there is a
my-directive4
which has{priority: 10, terminal: false}
in the tag<div my-directive1 my-directive2 my-directive3 my-directive4></div>
? It should always be running, but it may before or aftermy-directive2
, right? -
Anders Ekdahl over 11 yearsExactly, directives with the same priority will always be called, even if another directive with the same priority has terminal set to true. That's because the order of directives with the same priority is undefined, so they will all be called.
-
Adam over 10 years
-
Madeline Trotter over 10 years@Adam It works because after
ng-repeat
runs you're left with a new element for every item in the repeat's collection, each with its own child scope and attributes (which may be directives). These attributes then run normally, as though you'd written each one manually and put the same directive on each. A simpler example to look at would beng-if
. Inserts or removes the whole DOM element based on its condition. The other directives need to re-run when it's inserted each time, but they shouldn't run before theng-if
orng-repeat
. Unless that's your goal, then usepriority: 1001
, etc