How to Use Directive Link Function in AngularJS
We will introduce directives and directive link functions in AngularJS and go through examples to understand them.
Directive Link in Angular
The Directives are the DOM element markers that tell the AngularJS to extend the HTML to DOM elements and their children.
In AngularJS, most directives start with ng- where ng stands for Angular. There are many built-in directives in AngularJS, and we can also create custom directives for our application.
Some built-in directives that are widely used are ng-app, ng-init, ng-model, ng-bind, etc.
Let’s create a new AngularJS application to go through an example of directives.
First of all, we will add the AngularJS library using script tags.
# AngularJs
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
Now, we will define the AngularJS application using ng-app.
# AngularJs
<body ng-app="">
...
</body>
Then, we will define a model name using the ng-model directive and display the model’s value in a div.
# AngularJs
<input type="text" ng-model="name" />
<div class="Identity-name">
Hello {{name}}, Welcome Back!
</div>
Output:
Let’s test it by typing the value.
Output:
Directive Link Function in Angular
Now let’s discuss the directive link function in Angular by going through an example to understand how to create a custom directive in AngularJS.
First, we will set our template in index.html, including the AngularJS library, and define the AngularJS application using ng-app="my-app". Inside our application, we will describe the controller that will be operated using ng-controller="Controller".
We will create a div with a custom directive link programming-language inside our controller.
Our code in index.html will look like below.
# AngularJs
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Directive Link Function Example by Rana Hasnain Khan</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="my-app">
<div ng-controller="Controller">
<div programming-language></div>
</div>
</body>
</html>
Now, in script.js inside our controller, we will define a scope for a language in which we will provide the name and latest version of that language.
# AngularJs
(function(angular) {
'use strict';
angular.module('my-app', [])
.controller('Controller', ['$scope', function($scope) {
$scope.language = {
name: 'Angular Js',
version: '1.8.2'
};
}])
Using the directive link function, we will link our directive programming-language and the function. We will pass the template with values from the scope of language.
The final code in script.js will look like below.
# AngularJs
(function(angular) {
'use strict';
angular.module('my-app', [])
.controller('Controller', ['$scope', function($scope) {
$scope.language = {
name: 'Angular Js',
version: '1.8.2'
};
}])
.directive('programmingLanguage', function() {
return {
template: 'Name: {{language.name}} <br> Version: {{language.version}}'
};
});
})(window.angular);
Output:
In this way, we can easily use built-in directives and create our new custom directives that can be used to pass values or templates in template files.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn