Code


<!DOCTYPE html> <html> <head> <script src="angular.js"></script> <script src="script.js"></script> <style> .logTextArea { width: 200px; height: 80px; } </style> </head> <body ng-app="mainModule"> <div ng-controller="mainController"> <h3>1. Low, medium and high priority with no terminal directives</h3> <div low-priority="1" medium-priority="1" high-priority="1"></div> <textarea class="logTextArea">{{compilationResult1}}</textarea> <br /> <h3>2. Low priority terminal directive</h3> <div low-priority="2" medium-priority="2" high-priority="2" low-priority-terminal="2"></div> <textarea class="logTextArea">{{compilationResult2}}</textarea> <br /> <h3>3. Medium priority terminal directive</h3> <div low-priority="3" medium-priority="3" high-priority="3" medium-priority-terminal="3"></div> <textarea class="logTextArea">{{compilationResult3}}</textarea> <br /> <h3>4. High priority terminal directive</h3> <div low-priority="4" medium-priority="4" high-priority="4" high-priority-terminal="4"></div> <textarea class="logTextArea">{{compilationResult4}}</textarea> <br /> </div> </body> </html>
// *** LOGGING - START *** // Elements defined outside the module just for logging var logScope = null; var compilationResult1 = ""; var compilationResult2 = ""; var compilationResult3 = ""; var compilationResult4 = ""; var logLine = function (logNumber, directiveName) { if (logScope) { logScope["compilationResult" + logNumber] += "[" + directiveName + "]\n"; } else { this["compilationResult" + logNumber] += "[" + directiveName + "]\n"; } }; // *** LOGGING - END *** angular.module("mainModule", []) .controller("mainController", function ($scope) { $scope.compilationResult1 = compilationResult1; $scope.compilationResult2 = compilationResult2; $scope.compilationResult3 = compilationResult3; $scope.compilationResult4 = compilationResult4; logScope = $scope; }) .directive("lowPriority", function () { return { priority: 10, compile: function (element, attrs) { logLine(attrs.lowPriority, "lowPriority"); } }; }) .directive("lowPriorityTerminal", function () { return { priority: 10, terminal: true, compile: function (element, attrs) { logLine(attrs.lowPriorityTerminal, "lowPriorityTerminal"); } }; }) .directive("mediumPriority", function () { return { priority: 20, compile: function (element, attrs) { logLine(attrs.mediumPriority, "mediumPriority"); } }; }) .directive("mediumPriorityTerminal", function () { return { priority: 20, terminal: true, compile: function (element, attrs) { logLine(attrs.mediumPriorityTerminal, "mediumPriorityTerminal"); } }; }) .directive("highPriority", function () { return { priority: 30, compile: function (element, attrs) { logLine(attrs.highPriority, "highPriority"); } }; }) .directive("highPriorityTerminal", function () { return { priority: 30, terminal: true, compile: function (element, attrs) { logLine(attrs.highPriorityTerminal, "highPriorityTerminal"); } }; });

Example


Description


If we need to control the order of compilation of our custom directives inside a single DOM node, we can assign them a priority. We can do this with the priority property in the directive's definition object that accepts a number where a higher value means that AngularJS will compile the directive before those with a lower value. The default value for the priority property is zero. If more than one directive in a DOM node have the same priority, their order of compilation is not defined. If a directive needs to stop the compilation of those with a lower priority, it can do that by assigning the value true to the terminal property in its definition object. By default terminal is false. The compilation of all the directives with the same priority as the terminal one will still be executed, only the compilation of the lower priority directives will be avoided.

You can check the described behavior in the example, where we've defined some directives with different priorities and some terminal directives as well.