When multiple directives are applied to the same DOM element, AngularJS uses the priority property to determine the execution order.
By default, directives have a priority of 0, but you can explicitly define a priority value to control which directive runs first.
Step 1: Understanding Directive Priority
- Higher priority runs first → A directive with priority
100runs before one with priority50. - Default priority is
0if not specified. - Directives with the same priority → They execute in the order they are defined in the HTML.
- Combining priority with
terminal: true→ Stops execution of lower-priority directives.
Step 2: Creating Two Directives with Different Priorities
Let’s create two directives applied to the same element but with different priorities.
Example – High-Priority Directive Runs First
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<title>Directive Priority</title>
</head>
<body ng-controller="MainCtrl">
<div custom-directive another-directive>
Check Console for Execution Order
</div>
<script>
var app = angular.module('app', []);
// Higher priority directive (Runs First)
app.directive('customDirective', function() {
return {
priority: 100, // High priority
restrict: 'A',
link: function() {
console.log("Custom Directive Executed");
}
};
});
// Lower priority directive (Runs Second)
app.directive('anotherDirective', function() {
return {
priority: 50, // Lower priority
restrict: 'A',
link: function() {
console.log("Another Directive Executed");
}
};
});
</script>
</body>
</html>
Expected Console Output
Custom Directive Executed
Another Directive Executed
customDirective executes first because it has a higher priority (100 > 50).
Step 3: Preventing Execution of Lower-Priority Directives
If you want a high-priority directive to stop all other directives from executing, use terminal: true.
Example – Stopping Execution with terminal: true
app.directive('customDirective', function() {
return {
priority: 100,
terminal: true, // Prevents lower priority directives from running
restrict: 'A',
link: function() {
console.log("Custom Directive Executed - Stopping further directives");
}
};
});
app.directive('anotherDirective', function() {
return {
priority: 50,
restrict: 'A',
link: function() {
console.log("Another Directive Executed");
}
};
});
Expected Console Output
Custom Directive Executed - Stopping further directives
anotherDirective is skipped because customDirective has terminal: true.
Step 4: Handling Directives with Equal Priority
If two directives have the same priority, they execute in the order they are defined.
Example – Same Priority Directives
app.directive('firstDirective', function() {
return {
priority: 50,
restrict: 'A',
link: function() {
console.log("First Directive Executed");
}
};
});
app.directive('secondDirective', function() {
return {
priority: 50,
restrict: 'A',
link: function() {
console.log("Second Directive Executed");
}
};
});
Expected Console Output
First Directive Executed
Second Directive Executed
Order follows HTML attribute definition.
Step 5: Combining Priority with restrict Options
Different directive types (E, A, C, M) can also be controlled using priority.
Example – Element Directive vs Attribute Directive
<custom-directive another-directive>
Check Console for Execution Order
</custom-directive>
app.directive('customDirective', function() {
return {
priority: 80,
restrict: 'E', // Element directive
link: function() {
console.log("Custom Element Directive Executed");
}
};
});
app.directive('anotherDirective', function() {
return {
priority: 100, // Higher priority
restrict: 'A', // Attribute directive
link: function() {
console.log("Attribute Directive Executed First");
}
};
});
Expected Console Output
Attribute Directive Executed First
Custom Element Directive Executed
Even though customDirective is an element, the attribute directive runs first due to priority.