Sunday 5 June 2016

Information about the Link function in Angular Js Custom Directive

In this post i am going to discuss about the concepts of link function in angular Directive , normally the logic of directive is resides in the link function, which have the following parameters scope,element,attrs,controller , Now we see the example of the custom directive 

link:function Linkfn(scope,elem,attrs,ctrl){}

scope: the scope of the directive
elem: Dom element where the directive applied
attrs: collection of attrs
ctrl : array of controllers


Directive :
*************************



Controller:
*************************

appRoot.controller('MainController', function ($scope) {
    'use strict';   
     $scope.Product = {};
    
     $scope.sourceList = [{"id":1,"name":"Apple"},
                          {"id":2,"name":"Orange"},
                          {"id":3,"name":"Banana"},
                          {"id":4,"name":"Papaya"},
                          {"id":5,"name":"Jackfruit"}];
    $scope.Product.Selected = $scope.sourceList[0];
    
});



Html:
*************
Use the track-change directive in tag that you implement the ng-model, in this example i am used in select , where whenever user selects the new value, old value is retained in OldValue property, you can see the Model that maintains the history, but in view when we bind it shows only the latest value ,This is because of $formatters.

Output:
*******************

appRoot.directive('trackChange',function(){
    return{
        restrict:'A',
        require:'ngModel',
        link:function(scope,element,attrs,ngModel){
            
            var historyObject = {NewValue:undefined,OldValue:undefined};
            var OldValue = {};
            var NewValue = {};
            ngModel.$formatters.push(function(value){
                if(historyObject.NewValue!=undefined)
                    return historyObject.NewValue;
                if(value!=undefined){
                    historyObject.NewValue = value;
                }
                return value;
            });
            
            ngModel.$parsers.push(function(value){             
                
                historyObject.OldValue = historyObject.NewValue;;
                historyObject.NewValue =  value;
                ngModel.$setViewValue(historyObject.NewValue);
                ngModel.$render();
                ngModel.$setValidity('is_valid',true);
                return historyObject;
            });
            
        }
    }
})
var appRoot = angular.module('appRoot',[]);
appRoot.controller('MainController', function ($scope) {
    'use strict';   
     $scope.Product = {};
    
     $scope.sourceList = [{"id":1,"name":"Apple"},
                          {"id":2,"name":"Orange"},
                          {"id":3,"name":"Banana"},
                          {"id":4,"name":"Papaya"},
                          {"id":5,"name":"Jackfruit"}];
    $scope.Product.Selected = $scope.sourceList[0];
    
});
<div ng-app="appRoot">
    <div style="margin-left:40px;" ng-controller="MainController">
      
        <br />
        <select ng-change="modelChange()" track-change="" ng-model="Product.Selected" 
                ng-options="prod.name for prod in sourceList" >
        </select>  
        <span style="color:orange">[[Product.Selected]]</span>
</div>
</div>
From this post you can learn how to create a Directive with link function.

No comments:

Post a Comment