Compilation order and links for multiple attribute directives in AngularJS?

Question

Suppose I have two attribute directives called myFoo and myBar . These directives are defined using restrict: 'A' .

Then I have an element

 <div my-foo my-bar></div> 

In what order will compilation / linking functions be called? Does my-foo compile before my-bar compiles?

Answer 1

In addition to @valepu's answer, here is a description of the priority property for DDO (directive definition object):

TL; DR The default value of priority is 0 , and if you want to change the order in which the elements are compiled, you will have to increase the priority for element (s).

When there are several directives defined for a single DOM element, it is sometimes necessary to specify the order in which the directives are applied. Priority is used to sort directives before the compilation function is called. Priority is defined as a number. First, directives with a high numerical priority are set. The functions of the preliminary link are also executed in order of priority, but after the link, the functions are performed in the reverse order. The order of directives with the same priority is undefined. The default priority is 0.

In your case, if you do not specify priority for your directives, my-bar will be compiled first, and then my-foo . However, note that the controller is initialized first, then pre , followed by the post link function. In addition, order is important here: Angular compiles alternate directives. Follownig is my console.log print that shows the process:

 bar controller foo controller pre bar pre foo post foo post bar 

If you want to play, I created Plunker .

Now, if you change priority to priority: 1 , you will get the following output:

 foo controller bar controller pre foo pre bar post bar post foo 

As you can see, it starts with myFoo and goes to myBar . Thus, myFoo has a higher priority.

Update 1

Question:

How do you deal with a situation in which two different supplier directives (A and B) are dependent on each other and the execution order is important? Is this possible without changing the settings of the buckets?

I suggest implementing the decorator as follows:

 app.config(function($provide) { $provide.decorator('myFooDirective', function($delegate) { var directive = $delegate[0]; directive.priority = 9; return $delegate; }); }); 

Typically, a decorator intercepts the creation of a service, allowing it to override or change the behavior of the service. However, you can also decorate your directive as shown above. In the decorator, you can set the priority for your needs in order to execute the execution order. As far as I know, the priority property is the only way to control the order in which directives are applied. When using the decorator, you change / override the priority property, but not directly set it, if you do not mean DDO.

The plunker above is also updated with a decorator implementation.

Answer 2

No, there is a field in the directives called "priority" that tells angular when they should be compiled. The higher the priority, the sooner they will be compiled. Thus, in your case, the directives will always be compiled in the same order (regardless of how you write them in the tag), and this order depends on their priority field (default is 0).

from https://docs.angularjs.org/api/ng/service/$compile

a priority

When there are several directives defined for a single DOM element, it is sometimes necessary to specify the order in which the directives are applied. Priority is used to sort directives before the compilation function is called. Priority is defined as a number. First, directives with a high numerical priority are set. The functions of the preliminary link are also executed in the order of priority, but after the link, the functions are performed in the reverse order. The order of directives with the same priority is undefined. The default priority is 0.

 var myModule = angular.module(...); myModule.directive('directiveName', function factory(injectables) { var directiveDefinitionObject = { priority: 0, //This is the priority field /* ....... */ }; return directiveDefinitionObject; }); 

This article seems to explain quite well how priority works in different cases: http://www.newyyz.com/blog/2014/12/15/understanding-priorities-in-angularjs-directive-definition-objects/