In this post we are going to see the priority option in the angular directive, why we need the priority option in directive, it is because we can use the more than one directive in the single element, Now we see the example for this
Expected Output:
To check for this option we will create a directive , on that directive we will use another two directive which will change the font and color of the directive. Now we will see the code
HTML :
From the above you can see the hello-world directive have two directives on the same element which will change the font size and color of the element
Directive:
Log :
From the code you can see the redFont directive have more priority than mediumSize priority, so it will execute first, so compile function of redfont execute first and Link function of that directive execute last.
Output:
From this post you can see how to use the priority option in directive.
Expected Output:
To check for this option we will create a directive , on that directive we will use another two directive which will change the font and color of the directive. Now we will see the code
HTML :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="application/javascript" src="angular.min.js"></script> <script type="application/javascript" src="mod.js"></script> </head> <body ng-app="app"> <div ng-controller="mainController"> <hello-world red-font medium-size></hello-world> </div> </body> </html>
From the above you can see the hello-world directive have two directives on the same element which will change the font size and color of the element
Directive:
var app = angular.module('app',[]); app.controller('mainController',['$scope',function($scope){ }]); app.directive('helloWorld', function () { return{ restrict:'E', scope:{ }, template:'<div>Hello world {{Name}} . By Rajesh G , Architect</div>', controller: function ($scope) { $scope.Name = "Angular"; }, link: function (scope,element,attrs) { } } }); app.directive('mediumSize', function () { return{ restrict:'A', priority:10, compile: function (scope,element) { console.log('mediumSize called in compile Function'); return function (scope, element, attrs) { element.css('font-size','20px'); console.log('mediumSize called in Link Function'); } } } }); app.directive('redFont', function () { return{ restrict:'A', priority:20, compile: function () { console.log('RedFont called in compile function'); return function (scope,element,attrs) { element.css('color','red'); console.log('RedFont called in Link function'); } } } });
Log :
From the code you can see the redFont directive have more priority than mediumSize priority, so it will execute first, so compile function of redfont execute first and Link function of that directive execute last.
Output:
From this post you can see how to use the priority option in directive.
No comments:
Post a Comment