What is `priority` of ng-repeat directive can you change it?

Question

Angular Documentation says: -

The compilation of the DOM is performed by the call to the $compile() method. The method traverses the DOM and matches the directives. If a match is found it is added to the list of directives associated with the given DOM element. Once all directives for a given DOM element have been identified they are sorted by priority and their compile() functions are executed.

The ng-repeat directive I believe has a lower priority than custom directives, in certain use cases like dynamic id and custom directive. Does angular permit tinkering with priority of directives to choose execution of one before the other?

score 55 · Accepted Answer · edited Jul 29 '15 at 19:34

55

Yes, you can set the priority of a directive. ng-repeat has a priority of 1000, which is actually higher than custom directives (default priority is 0). You can use this number as a guide for how to set your own priority on your directives in relation to it.

angular.module('x').directive('customPriority', function() {
    return {
        priority: 1001,
        restrict: 'E',
        compile: function () {
            return function () {...}
        }
    }
})

priority - When there are multiple directives defined on a single DOM element, sometimes it is necessary to specify the order in which the directives are applied. The priority is used to sort the directives before their compile functions get called. Priority is defined as a number. Directives with greater numerical priority are compiled first. The order of directives with the same priority is undefined. The default priority is 0.

edited Jul 29 '15 at 19:34

Strikeskids

3,932
13
27

answered Oct 09 '13 at 11:53

Cuong Vo

4,592
4
22
12

Unrelated/nitpicking question: aren't `compile` and `link` functions mutually exclusive (i.e. you would only use one **or** the other)? – JaKXz Jan 26 '15 at 16:47
@JaKXz the `compile` and `link` functions are not mutually exclusive. You can use both on the same directive. The `compile` function happens before the `link` function, and returns a `link` function. You would use `compile` to manipulate the template of your directive. It's not safe to do DOM manipulation in `compile` because template values haven't been interpolated against a `scope`. See this [StackOverflow question](http://stackoverflow.com/questions/12164138/what-is-the-difference-between-compile-and-link-function-in-angularjs) for a more in-depth explanation. – Morgan Polotan Mar 24 '15 at 20:39
1

I think he perhaps ment that the code is written in such a way that the link part of the directive would never be executed (wrong syntax). – Samir Alajmovic Apr 20 '15 at 16:42

score 12 · Answer 2 · answered Oct 09 '13 at 11:58

AngularJS finds all directives associated with an element and processes it. This option tells angular to sort directives by priority so a directive having higher priority will be compiled or linked before others. The reason for having this option is that we can perform conditional check on the output of the previous directive compiled.

In the followed example, first add button and only after add class to current button:

Demo Fiddle

App.directive('btn', function() {
  return {
    restrict: 'A',
    priority: 1,
    link: function(scope, element, attrs) {
      element.addClass('btn');
    }
  };
});

App.directive('primary', function() {
  return {
    restrict: 'A',
    priority: 0,
    link: function(scope, element, attrs) {
      if (element.hasClass('btn')) {
        element.addClass('btn-primary');
      }
    }
  };
});

What is `priority` of ng-repeat directive can you change it?

2 Answers2

Linked