Event listener directive priority

Question

I have one input element with two directives:
-direc (priority level 1)
-directive (priority level 0)

even if directc should be executed first, the directive is executed first.
What for?

Here is a snippet showing what is happening

angular.module('app', []) .directive('direc', function(){ return { priority : 1, link : function(scope, element){ element.on('click', function(){ alert('direc'); }); } }; }) .directive('directive', function(){ return { priority : 0, link : function(scope, element){ element.on('click', function(){ alert('directive'); }); } }; }); 

 <div ng-app="app"> <input type="text" direc directive/> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 

Answer 1

Basically, what happens when a directive hits the image, angular first runs the compile directive function.

Here in compile , you can have control over the raw DOM / simple DOM, in compile you will have no scope. The compilation function is responsible for returning the preLink and postLink . From which preLink is called first

Inside the preLink function preLink you can have a DOM with a scope, immediately after preLink it displays an internal element or other directives. After passing through each DOM element, it invokes the postLink function. Which fully compiles the DOM on a grand scale. Therefore, the directive event is logged first because it has the lowest priority and has its own postLink function.

Plunkr to understand the flow (look at the console to make it more understandable)

You must register these events inside the preLink function preLink that the event is logged after compiling the directive function.

the code

 angular.module('app', []) .directive('direc', function() { return { priority: 1, compile: function(element, attributes) { console.log("Compiled direc") return { pre: function(scope, element, attrs) { console.log("Prelink for direc firective generated"); element.on('click', function() { alert('direc'); }); }, post: function(scope, element, attrs) { console.log("Called After direc DOM linked with scope") } } }, } }) .directive('directive', function() { return { priority: 0, compile: function(element, attributes) { console.log("Compiled direc") return { pre: function(scope, element, attrs) { console.log("Prelink for direc firective generated"); element.on('click', function() { alert('directive'); }); }, post: function(scope, element, attrs) { console.log("Called After directive DOM linked with scope") } } }, }; }); 

Working plunkr

Answer 2

In documents:

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 their compilation functions are called . Priority is defined as a number. First, directives with a high numerical priority are set. Prelink functions are also performed in priority order, but post link functions are performed in reverse order. The order of directives with the same priority is undefined. The default priority is 0.

I think that you confuse the priority functionality, since this does not apply to which calls of the event initiators are first called, but their link function is run first.

If you make changes to an element while executing the link function, you can see the difference:

 angular.module('app', []) .directive('direc', function(){ return { priority : 1, link : function(scope, element){ element.html('direc with priority 1'); element.on('click', function(){ alert('direc'); }); } }; }) .directive('directive', function(){ return { priority : 0, link : function(scope, element){ element.html('directive with priority 0'); element.on('click', function(){ alert('directive'); }); } }; }); 

The element with the lowest priority was the last, so the resulting HTML is a "director with priority 1"

Here plunkr works: http://plnkr.co/edit/VKqiMQDyMFsFguuRp7Ko?p=preview