AngularJS Directive’s link key defines link function for the directive. Precisely, using link function, we can define directive’s API & functions that can then be used by directive to preform some business logic. The link function is also responsible for registering DOM listeners as well as updating the DOM. It is executed after the template has been cloned.
link function gets executed for each instance of directive so that each instance gets it’s own business-logic without affecting others. If we need to add functionality to our instance of the directive, we can add it to the scope of the element we’re working with. AngularJS passes several arguments to the link function, which looks like following:
link: function(scope, element, attrs) {
...
}
scope : It is the scope of the element the directive is applied on. Note that scope is not injected but passed in.
element : It is the DOM element in HTML the directive is applied on.
attrs : These are the list of attributes as string available on the element in HTML.
There are other optional arguments available in link function for more advanced usage. Like:
link: function(scope, element, attrs, controller, transcludeFn) {
...
}
controller : It specifies the directive’s required controller instance(s) or its own controller (if any). The exact value depends on the directive’s require property. That controller itself is defined in directive function using require key.
transcludeFn : It is a transclude linking function pre-bound to the correct transclusion scope.
In this post, we will discuss the basic usages of link function. Advanced usage will be discussed in detail in post Directive’s Controller & require option.
Let’s see an example to learn in detail. We will build on the example from previous post.
Live Example:
This example shows how we can take advantage of link function to perform DOM manipulation via adding event listeners.
Now as soon as we click on an item, it gets replaced with a demo message[in addition to logging on console]. Simple DOM manipulation. Let’s see how we do it.
.directive('itemWidget', [function() {
return{
...
link : function(scope, element, attrs){
//Add event listener for 'click' event
element.on('click', function(event) {
//Update DOM.
element.html('Thanks for buying this item.');
element.css({
color: 'green'
});
});
}
}
}]);
First thing to be noticed is the inclusion of link function. In this example, we are playing with DOM manipulation. We have kept the logic of DOM manipulation in our link function. Once an item is clicked, we apply CSS on that specific item and replace it’s content by a dummy message. Interestingly, each element get’s it’s business logic executed independent of others.
Complete code for this example is shown below:
<html>
<head>
<title>Directive Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body class="jumbotron container" ng-app="myApp">
<div ng-controller="AppController as ctrl">
<h3>List of Sale Items.</h3>
<div ng-repeat="bla in ctrl.items">
<item-widget item="bla" promo="Christmas-Sale" on-select="ctrl.onItemSelect(selectedItem)"></item-widget>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js">
</script>
<script>
angular.module('myApp', [])
.controller('AppController', [function() {
var self = this;
self.items = [
{name: 'Computer', price: 500, condition:'New',brand : 'Lenovo', published:'01/11/2015'},
{name: 'Phone', price: 200, condition:'New',brand : 'Samsung', published:'02/11/2015'},
{name: 'Printer', price: 300, condition:'New',brand : 'Brother', published:'06/11/2015'},
{name: 'Dishwasher', price: 250, condition:'Second-Hand',brand : 'WhirlPool', published:'01/12/2015'},
];
self.onItemSelect = function(name) {
console.log('Congrats. You have just bought a', name);
};
}])
.directive('itemWidget', [function() {
return{
restrict: 'E',
scope: {
item: '=',
promo: '@',
pickMe : '&onSelect'
},
templateUrl: 'saleItem3.html',
link : function(scope, element, attrs){
//Add event listener for 'click' event
element.on('click', function(event) {
element.html('Thanks for buying this item.');
element.css({
color: 'green'
});
});
}
}
}]);
</script>
</body>
</html>
And the template-partial [saleItem3.html] is:
<div class="panel panel-default">
<div class="panel-heading">
Published at:<span ng-bind="item.published | date"></span> Promotion: {{promo}}<button class="pull-right" ng-click="pickMe({selectedItem:item.name})">Buy me</button>
</div>
<div class="panel-body">
Name:<span ng-bind="item.name"></span>
Condition:<span ng-bind="item.condition"></span>
Price:<span ng-bind="item.price | currency"></span>
Brand:<span ng-bind="item.brand"></span>
</div>
</div>
This was a trivial example on using link-function. You can do a lot with link function knowing that each element get’s it’s business logic executed independent of others.
Advanced usage of link function involves the other parameters including controller & transcludeFn. transcludeFn is used for more exotic situations while controller is a medium for inter-directive communication. Post Directives controllers & require option discusses them in detail.
That’s it for link option. Let’s move to next configuration option [replace] of Directive Definition Object, which can be used to replace the container element altogether by directive’s actual content HTML.
You can use popular Apache HTTP server to serve files. If you need assistance setting-up server,
this post can help you.
References
If you like tutorials on this site, why not take a step further and connect me on Facebook , Google Plus & Twitter as well? I would love to hear your thoughts on these articles, it will help improve further our learning process.
In this post we will be developing a full-blown CRUD application using Spring Boot, AngularJS, Spring Data, JPA/Hibernate and MySQL,…
Spring Boot complements Spring REST support by providing default dependencies/converters out of the box. Writing RESTful services in Spring Boot…
Being able to start the application as standalone jar is great, but sometimes it might not be possible to run…
Spring framework has taken the software development industry by storm. Dependency Injection, rock solid MVC framework, Transaction management, messaging support,…
Let's secure our Spring REST API using OAuth2 this time, a simple guide showing what is required to secure a…
This post shows how an AngularJS application can consume a REST API which is secured with Basic authentication using Spring…
View Comments
Hi there to all, for the reason that I am genuinely keen of reading this website’s post to be updated on a regular basis. It carries pleasant stuff.
I like the efforts you have put in this, regards for all the great content.
naturally like your web site however you need to take a look at the spelling on several of your posts. A number of them are rife with spelling problems and I find it very bothersome to tell the truth on the other hand I will surely come again again.