How to understand the `terminal` of directive?

by

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.

More Related Contents:

  1. Is this a “Deferred Antipattern”?
  2. How to set focus on input field?
  3. AngularJS 1.5+ Components do not support Watchers, what is the work around?
  4. How to call a method defined in an AngularJS directive?
  5. How to use a keypress event in AngularJS?
  6. Link vs compile vs controller
  7. Angular.js directive dynamic templateURL
  8. Angularjs dynamic ng-pattern validation
  9. What is the difference between ng-app and data-ng-app?
  10. Easiest way to pass an AngularJS scope variable from directive to controller?
  11. Using angularjs filter in input element
  12. Angularjs loading screen on ajax request
  13. if a ngSrc path resolves to a 404, is there a way to fallback to a default?
  14. Directive isolate scope with ng-repeat scope in AngularJS
  15. calling method of parent controller from a directive in AngularJS
  16. Enable angular-ui tooltip on custom events
  17. Accessing attributes from an AngularJS directive
  18. angular directive encapsulating a delay for ng-change
  19. Call a method of a controller from another controller using ‘scope’ in AngularJS
  20. AngularJS leaves comments in HTML: is it possible to remove them?
  21. Can you change templateUrl on the fly?
  22. AngularJS: ngInclude vs directive
  23. Pass form to directive
  24. What is `priority` of ng-repeat directive can you change it?
  25. How to use `replace` of directive definition?
  26. How to implement an ng-change for a custom directive
  27. How to create a directive with a dynamic template in AngularJS?
  28. Access Parent Scope in Transcluded Directive
  29. how do I get ng-include directive to work with a Content Delivery Network?
  30. AngularJS – Directives vs Controllers

Leave a Comment