In AngularJS, why does the behavior of a terminal custom directive change with built-in directives?

Question

To my understanding, setting terminal to true will result in that directive being executed last, and any directives with a greater priority will execute before it (naturally), and any directive with a lower priority will not execute at all.

However, when using a custom directive with a built-in directive, it seems that this behavior is switched. Let's say we use a custom directive with ng-repeat, unless the custom directive has a priority of less than 1000 (which is ng-repeat's priority), it will NOT execute.

here is a JSFiddle representing my question: http://jsfiddle.net/codef0rmer/aNCY3/

In reference to the JSFiddle code, with custom-directives only(first, second): As long as first has a priority of 2 or higher, it will execute before second. If it has a priority higher than 2, it will not execute.

With custom-directives in conjunction with a built-in directive (noEntry, ngRepeat): Since ngRepeat has a priority of 1000, if noEntry has a priority of 1000 or higher, it will NOT execute, however, it will execute with a lower priority than 1000.

Austin Mullins Austin Mullins · Accepted Answer · 2013-12-18T18:29:30

I did some snooping in my fork of your fiddle, and I found that when the custom directive has a higher priority, it is executed before ng-repeat. In other words, it's executed before the li is actually rendered in the DOM. Since there's no list item to append, nothing happens.

You can see that the directive executes by adding a console.log statement before the return in your directive and opening the console on your browser, as I've done here:

App.directive('noEntry', function() {
    console.log("Testing...");
    return {
        restrict: 'A',
        priority: 1001,
        link: function(scope, element, attrs) {
            element.append('No Entry: Executed ');
        }        
    };
});

Playing around with the terminal declaration in second, I don't see any effect on no-entry.

In AngularJS, why does the behavior of a terminal custom directive change with built-in directives?

1 Answers