CODEWITHSUNDEEP
angularjsangularjs-directive
Deadpool
Deadpool

Reputation: 8240

AngularJs Link or PostLink Usage Example

Being new to Custom Directives I made a simple example to demonstrate usage of Link property. All, I was able to make out was that by it also we can define or change scope. Can we do anything else with it OR is it used for any other useful purposes?

HTML 

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script> 
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
<div peter></div>
{{name}}
<script>
//app declaration
var app = angular.module('myApp',[]);
//controller declaration
app.controller('myCtrl', function($scope){
    $scope.name = "Hi dear!"
});
//directives declaration
app.directive('peter', function(){
    return{
        restrict: 'A',
        template: '{{name}}',
        link: function(scope, element, attr){
            scope.name = "Hira";
        }
    }
});
</script> 
</body> 
</html>

Result

Hira
Hira

Upvotes: 0

Views: 785

Answers (2)

Sravan
Sravan

Reputation: 18647

Directive are mainly used to manipulate the Dom, You can change the properties of the Dom elements using the link function.

Angular uses Jqlite for the dom manipulation.

Here is an example explaining the Dom manipulation using Jqlite,

.directive('sampleDirective', function(){
     return {
            link: function(scope, element, attrs) {
            // this example binds a behavior to the
            // mouseenter event
            element.bind("mouseenter", function(){
                ... do stuff after mouseenter ...

            }
            element.bind("click", function(){
                ... do stuff after mouseenter ...

            }
            element.bind("keyup", function(){
                ... do stuff after mouseenter ...

            }
    },
    restrict: ‘E’,
    template: <div>Hello, World!</div>
         }
})

Link Function Args:

3 standard params for a link function.(Plus optional 4th: controller.) They’re supplied as args by the directive function,if specified.

scope: whatever scope object is local

element: element declared on: this

attrs: an object containing the html attributes defined on the element, including the directive invocation itself

Supplied to the function not by name but in order. CAll them what ever you want.

This is link reference

This is the jqlite method reference used in angular

Upvotes: 1

austinbruch
austinbruch

Reputation: 323

The link function's signature looks like this: function(scope, iElement, iAttrs, controller, transcludeFn).

As you mentioned, the first argument scope grants you access to the scope of the directive.

The second argument iElement grants you access the angular.element wrapper (jQuery or jqLite, depending on what's available) of the DOM element of the directive.

The third argument iAttrs grants you access to the attributes of the directive.

The fourth argument controller grants you access to the controllers that can be (optionally) required by the directive. These controllers can be used to interact with exposed APIs from other controllers.

The fifth argument transcludeFn relates to how transclusion is to be performed, if the custom directive is to transclude any HTML content.

For more information, reference the angular.compile documentation.

Upvotes: 1

Related Questions