Sunday 5 June 2016

Detail information about priority option in custom Directive in Angular Js

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 :
<!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