{"id":19937,"date":"2015-05-28T12:31:47","date_gmt":"2015-05-28T07:01:47","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=19937"},"modified":"2017-08-03T14:15:01","modified_gmt":"2017-08-03T08:45:01","slug":"directive-priority-in-angularjs","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/directive-priority-in-angularjs\/","title":{"rendered":"Directive Priority in AngularJS"},"content":{"rendered":"

Recently I discovered that every directive in AngularJS<\/a> has a priority score assigned to it. While the page is loaded the priority plays a very important role in setting the order of the execution of various directives in single DOM Element. The priority is used to sort the directives before their “compile” function gets called. In simple words, the execution of directives is done in order of its priority score. Let us understand this using an example:<\/p>\n

[javascript]
\n\/\/Directive Definition
\nangular.module(‘customDirectives’, [])
\n .directive(‘directive1’, function () {
\n return {
\n restrict: "A",
\n priority: 100,
\n compile: function (element, attributes) {
\n console.log("This is directive with priority 100.")
\n }
\n }
\n }).directive(‘directive2’, function () {
\n return {
\n restrict: "A",
\n priority: 200,
\n compile: function (element, attributes) {
\n console.log("This is directive with priority 200.")
\n }
\n }
\n });
\n[\/javascript]<\/p>\n

[html]
\n<p directive1="" directive2=""><\/p>
\n[\/html]<\/p>\n

Now if we use the directives defined on the top with above HTML we get following output in console.<\/p>\n

This is directive with priority 200.\r\nThis is directive with priority 100.\r\n<\/pre>\n
You can set the priority of custom directive by defining the “priority” attribute of the directive object (as shown in the example above) and when the priority is left undefined then it is set to the zero by default. Also, in case of same priority the directives are executed in the alphabetical order.<\/p>\n
For knowing the priority score of predefined directives please refer to their angular documentation.<\/p>\n
Hope you find this blog useful.<\/p>\n
Read Further on AngularJS Series<\/span><\/p>\n