Directives in AngularJS Simplified With Examples: Part 1

Dhananjay Kumar
9y
18.1k
0
3

Article

Thanks First

At the very beginning of this article, I want to give credit to the following two online courses. What I learned from these courses is covered in this article.

What a Directive is

In angularJS directives do the following:

It attaches the specified behavior to DOM elements.
It creates a new element in the DOM.
It transforms the DOM elements.

In simple words, using directives, we can modify the behavior of a specific DOM element or add a new custom element to the DOM. For example ng-show is a directive. It modifies the behavior of an element to specify whether that element will be visible or not.

Let us consider the following code listing as an example:

<div ng-show="true">
Hi I will be visible
</div>
<div ng-show="false">
Hi I will not be visible
</div>

We are using the built-in directive ng-show to amend the behavior of the div. First the div will be visible whereas the second div won't.

First custom directive

A very simple custom directive can be created as shown in the following listing:

myApp.directive('myFirstDirective', function () {
return {
template: "<b>Hello from custom directive</b>",
restrict: "E"
}
})

The preceding is the minimal directive we can create. A custom directive can be created using the directive method. It takes a directive name and the function as the input parameters. There are some important points you must keep in mind when creating a directive.

A directive name is specified in camel case.
The view directive can be used by separating the camel case name of the directive, either using a dash, colon, or underscore.
A combination of dash, underscore or colon can also be used.

We have given the directive name as myFirstDirective. On the view it can be used either as my-first-directive or my:first:directive or my_first_directive or even as my_first-directive or my-first:directive.

On the view custom directive myFirstDirective can be used as shown in the following listing. As you see we are using the custom directive with various combinations of dash, underscore and colon. For angular all three options are exactly the same.

<body>
<my-first-directive></my-first-directive>
<br />
<my:first:directive></my:first:directive>
<br />
<my_first_directive></my_first_directive>
<br />
<my:first_directive></my:first_directive>
<br />
<my-first-directive />
</body>

In the Chrome browser the developer tools on selecting the inspect element option, you can see that the directive template has been replaced with the HTML.

Custom directive can be used on the view in one of the following four ways.

As an attribute: set restrict value to A
As a custom element: set restrict value to E
As a comment: set restrict value to M
As a class: set restrict value to C

Out of these four methods, as an attribute and as an element are widely used. In older version of some browsers the comment and class ways of using a directive can be used.

Custom Directive with data binding

Let us proceed to create a custom directive that will use the angularjs bindings. We have the following controller:

myApp.controller('studentscontroller', ['$scope', function ($scope) {
$scope.student = {
name: "dj",
age: 32,
subject: [
"math",
"geography"
]
}
}]);

Usually to display data from the controller, we use a binding expression on the view. Another way to display data is using the custom directive that will use the data binding. We can create a custom directive with the binding expression as shown in the listing below:

myApp.directive('studentDetail', function () {
return {
template: "<b>hey {{student.name}} is {{student.age}} old </b>",
restrict: "E"
}
});

As you notice inside the custom directive studentDetail, we are using the binding expression. Now we can use the studentDetail custom directive on the view as shown in the following listing:

<div ng-controller="studentscontroller">
<student-detail></student-detail>
</div>

On the view you will get data renderd using the custom directive as shown in the image below:

And on the element inspection in the Chrome browser developer tools, you will find an element in the DOM as shown in the image below.

In the DOM if we want to replace the custom element then that can be done by setting the replace option in the custom directive. Let us modify the studentDetail directive by setting the replace attribute to true.

myApp.directive('studentDetail', function () {
return {
template: "<b>hey {{student.name}} is {{student.age}} old </b>",
restrict: "E",
replace: true
}
});

Now in the DOM, we will see that the custom element has been removed as shown in the image below.

Using templateUrl

When we create a complex custom directive, a template as a string could be tough to handle. We can have a template in an external HTML file that can be loaded using the templateUrl attribute. We can move the template to an external HTML file that must have the same name as the directive. So let us add a studentDetail.html file to the application and move the template string to the HTML file.

studentDetail.html

<div>
<b>hey {{student.name}} is {{student.age}} old </b>
</div>

We need to modify the directive as shown in the listing below:

myApp.directive('studentDetail', function () {
return {
templateUrl: "studentDetaildj.html",
restrict: "E",
replace: true
}
});

Let us be a bit creative and use bootstrap to make the template more immersive. I am using the bootstrap panel. Using the ng-show directive, we are hiding/showing the subject div.

<div class="panel panel-primary">
<div class="panel-heading">
{{student.name}} {{student.age}}
</div>
<div ng-show='!!student.subject'>
Subjects:
<ul ng-repeat="s in student.subject">
<li>{{s}}</li>
</ul>
</div>
</div>

Events in the directive

Let us see how to work with events in directives. Let us say that we have an event in the controller as shown in the following listing.

myApp.controller('studentscontroller', ['$scope', function ($scope) {
$scope.student = {
name: "dj",
age: 32,
subject: [
"math",
"geography"
]
}
$scope.setGrade = function (student) {
student.grade = "A+"
}
}]);

We have added the setGrade function to the controller. We can use this event directly in the directive template as listed below.

<div class="panel panel-primary">
<div class="panel-heading">
{{student.name}} {{student.age}}
</div>
<div ng-show='!!student.subject'>
Subjects:
<ul ng-repeat="s in student.subject">
<li>{{s}}</li>
</ul>
</div>
<div ng-show='!!student.grade'>
{{student.grade}}
</div>
<div ng-show='!student.grade'>
<button class="btn btn-success" ng-click="setGrade(student)">set grade</button>
</div>
</div>

In the directive template we added a button and using the ng-click directive we are handling the event on the button. The browser application will look like as shown in the next image.

The problem with the preceding approach is that the click event resides in the parent controller rather than being a part of the directive. Hence it violates the rule of encapsulation. The idea of the scenario is we will have a click event function as the part of the directive.

The AngularJS directive supports a controller inside that. We can add a controller inside the directive as shown in the listing below.

myApp.directive('studentDetail', function () {
return {
templateUrl: "studentDetail.html",
restrict: "E",
replace: true,
controller: function ($scope) {
$scope.setGrade = function (student) {
student.grade = "B+"
}
}
}
});

The browser application will render exactly the same as it was running when the setGrade function was part of the controller.

Scopes in directives

AngularJS directives are of the following three types:

Shared scope
Inherited scope
Isolated scope

Shared scope

Default scope is the shared scope. So far we have been working with the shared scope. In the shared scope, the directive shares the scope of the controller, in which it is enclosed in.

Let us again consider the example used previously. The studentDetail directive is enclosed inside the studentsController. By default the studentDetail directive has the same scope as the studentsController.

To understand it better try logging the value of the $scope to the console for both the controller and the directive as shown in the listing below.

myApp.controller('studentscontroller', ['$scope', function ($scope) {
$scope.student = {
name: "dj",
age: 32,
subject: [
"math",
"geography"
]
}
console.log($scope);
}
]);
myApp.directive('studentDetail', function () {
return {
templateUrl: "studentDetail.html",
restrict: "E",
replace: true,
controller: function ($scope) {
$scope.setGrade = function (student) {
student.grade = "B+"
}
console.log($scope);
}
}
});

In the Google Chrome developer tool you will find that the id of both of the $scopes are the same.

In the shared scope the directive shared the scope of the controller it is enclosed in. Shared scope can be depicted by the next image. As you see the $scope object is being shared between the controller and the directive. If in the directive we change the data in the $scope object, it would be reflected to the controller.

In shared scope, the data attached to the $scope can be changed in the directive and it would be visible in the controller.

Inherited scope

Another option is a directive that can inherit the scope of the controller it is enclosed in. In this case the scope of the controller will be visible to the directive whereas the directive scope won't be visible to the controller. The controller scope becomes the parent of the directive scope. The inherited scope can be set by setting the value of the scope property to true as shown in the next code listing.

myApp.controller('studentscontroller', ['$scope', function ($scope) {
$scope.student = {
name: "dj",
age: 32,
subject: [
"math",
"geography"
]
}
console.log($scope);
}
]);
myApp.directive('studentDetail', function () {
return {
templateUrl: "studentDetail.html",
restrict: "E",
replace: true,
scope: true,
controller: function ($scope) {
$scope.setGrade = function (student) {
student.grade = "B+"
}
console.log($scope);
}
}
});

In the Google Chrome developer tool we will find that the id of the directive $scope and the controller $scope are different.

However if we examine the parent of the directive child scope, we will find that the parent is set to the id of the controller scope.

If we change data in the directive scope then that would not be reflected to the controller scope.

Isolated scope

Isolated scope is the most used scope in the angularJS custom directive. It allows us to work with various data from the different instances of the same custom directive. Let us consider the studentDetail directive and use it multiple times as shown in the following listing:

<div class="container" ng-controller="studentscontroller">
<student-detail> </student-detail>
<student-detail> </student-detail>
<student-detail> </student-detail>
</div>

The browser application will be rendered as shown in the next image. No point to guess that all four entry of directives are using the same data from the controller.

When you click on one of the set grades, it will set the grade for all the four students as shown in the next image.

For sure we may not want this kind of behavior in the application. This problem can be solved with the isolated scope. To create a directive with the isolated scope, set the scope property to an object when creating the directive. It is shown in the listing below.

myApp.directive('studentDetail', function () {
return {
templateUrl: "studentDetail.html",
restrict: "E",
replace: true,
scope: {},
controller: function ($scope) {
$scope.setGrade = function (student) {
student.grade = "B+"
}
console.log($scope);
}
}
});

We have created an isolated scope for the directive. Now the scope is not shared in the directive and the controller. At this point, on running the application we will find that the data is not displayed in the application because the scope is not shared.

When you click on one of the set grades, it will set the grade for all the four students as shown in the next image.

Using a diagram let us try to understand shared and isolated scope.

data shared

Now the question in front of us is, in isolated scope how to share the data from the controller to the directive? In Isolated scope data can be shared using the local scope property. A directive with the isolated scope can talk to the outside world using the local scope properties. There are the following three options in local scope properties.

@local scope property

The @local scope property can access the string from the outside the directive. Using the @local scope property a string value can be passed to the directive.

Let us assume we have a simple directive as shown in the listing below.

myApp.directive('aStudentDirective', function () {
return {
scope: {
name: '@'
},
template: "Hi <b>{{name}}</b>",
restrict: "E"
}
})

In the preceding directive we are using the @ local scope property to read the string from outside the directive. A directive is used as shown in the listing below.

<div class="container" ng-controller="studentscontroller">
<a-student-directive name="{{student.name}}"></a-student-directive>
</div>

In the directive student.name from the studentscontroller can be used. We are passing data to the directive as the string.

If you want a local scope property name in the directive to be different than the property name then that can be done as shown in the listing below.

myApp.directive('aStudentDirective', function () {
return {
scope: {
name: '@studentname'
},
template: "Hi <b>{{name}}</b>",
restrict: "E"
}
})

A directive can be used as shown in the listing below:

<div class="container" ng-controller="studentscontroller">
<a-student-directive studentname="{{student.name}}"></a-student-directive>
</div>

If we change the value of a student name in the controller, the directive will be updated. However any change in the directive local property will not make any change in the controller.

=local scope property

The character = local scope property is used to pass an object to the directive from the outside world. It also supports two-way binding. To understand it let us proceed to recreate the controller as shown in the listing below.

myApp.controller('studentscontroller', ['$scope', function ($scope) {
$scope.student1 = {
name: "dj",
age: 32,
guardian: {
mother: "abc",
father: "xyz"
},
subject: [
"math",
"geography"
]
}
$scope.student2 = {
name: "foo",
age: 14,
guardian: {
mother: "pqw",
father: "rty"
},
subject: [
"physics",
"geography"
]
}
$scope.student3 = {
name: "loo",
age: 21,
guardian: {
mother: "mnq",
father: "wsy"
},
subject: [
"math",
"bilogy"
]
}
}
]);

We have added more students to the $scope. This is a pretty straight forward controller. We will use this controller to understand the local scope property =.

Next let us create a directive as in the following:

Using the isolated scope
Using the = local scope property to pass object to the directive from the outside world

A directive can be created as shown in the listing below.

myApp.directive('studentDetail', function () {
return {
templateUrl: "studentDetail.html",
restrict: "E",
replace: true,
scope: {
student: '='
},
controller: function ($scope) {
$scope.setGrade = function (student) {
student.grade = "B+"
}
}
}
});

In the HTML we can use the directive passing a different value for the student as shown in the listing below.

<div class="container" ng-controller="studentscontroller">
<student-detail student="student1"></student-detail>
<student-detail student="student2"></student-detail>
<student-detail student="student3"></student-detail>
</div>

I have also modified the template in studentDetail.html as shown in the following listing.

<div class="panel panel-primary">
<div class="panel-heading">
<h2>{{student.name}} {{student.age}}</h2>
</div>
<div class="panel-body">
<div ng-show='!!student.subject'>
Subjects:
<ul ng-repeat="s in student.subject">
<li>{{s}}</li>
</ul>
</div>
<div class="well">
Guardians:<br />
Father : {{student.guardian.father}}<br />
Mother : {{student.guardian.mother}}<br />
</div>
<div ng-show='!!student.grade'>
{{student.grade}}
</div>
<div ng-show='!student.grade'>
<button class="btn btn-success" ng-click="setGrade(student)">set grade</button>
</div>
</div>
</div>

On running the application in the browser, we will find that the data of three different students have been rendered. Now when you set the grade of one student, another student will not be affected.

Inherited scope example

Now to understand the inherited scope better, let us say we have a requirement to collapse and expand each student panel when the user clicks on the panel header. To do this:

Add a ng-click directive to the panel header. When the user clicks on the header the function will be called in the directive controller.
Add a ng-hide directive to the panel body. On the clicking of the panel header the panel body will be either collapsed or expanded.

Let us start by adding the ng-click and the ng-hide directive.

<div class="panel panel-primary">
<div class="panel-heading" ng-click="hide()">
<h2>{{student.name}} {{student.age}}</h2>
</div>
<div class="panel-body" ng-hide="isHidden">
<div ng-show='!!student.subject'>
Subjects:
<ul ng-repeat="s in student.subject">
<li>{{s}}</li>
</ul>
</div>
<div class="well">
Guardians:<br />
Father : {{student.guardian.father}}<br />
Mother : {{student.guardian.mother}}<br />
</div>
<div ng-show='!!student.grade'>
{{student.grade}}
</div>
<div ng-show='!student.grade'>
<button class="btn btn-success" ng-click="setGrade(student)">set grade</button>
</div>
</div>
</div>

In the preceding code listing, we have added a ng-click directive (see the panel-header div). On the click event hide() function in the directive a controller will be called. We also added a ng-hide directive (see the panel-body div)

Next in the directive we need to add a hide() function and isHidden data to the $scope object of the controller that is the part of the directive.

myApp.directive('studentDetail', function () {
return {
templateUrl: "studentDetail.html",
restrict: "E",
replace: true,
scope: {
student: '='
},
controller: function ($scope) {
$scope.isHidden = false;
$scope.setGrade = function (student) {
student.grade = "B+"
}
$scope.hide = function () {
$scope.isHidden = !$scope.isHidden;
}
}
}
});

On running the application in the browser, we will find that the data of three separate students have been rendered and we can expand and collapse the student panel as shown in the image below:

Parent and child directives

We notice that studentDetail directive is becoming large. As the application grows, it will be tough to manage a directive that is too large. Let us proceed to take the guardian data and move it to a separate directive called studentGuardian.

We have created a template as shown in the listing below.

studentGuardian.html

<div class="well">
Guardians:<br />
Father : {{student.guardian.father}}<br />
Mother : {{student.guardian.mother}}<br />
</div>

Let us proceed to create a directive with the shared scope as shown in the listing below:

myApp.directive('studentGuardian', function () {
return {
templateUrl: "studentGuardian.html",
restrict: "E"
}
})

In the studentDetail directive, we can use the studentGuardian directive as shown in the listing below:

<div class="panel panel-primary">
<div class="panel-heading" ng-click="hide()">
<h2>{{student.name}} {{student.age}}</h2>
</div>
<div class="panel-body" ng-hide="isHidden">
<div ng-show='!!student.subject'>
Subjects:
<ul ng-repeat="s in student.subject">
<li>{{s}}</li>
</ul>
</div>
<student_guardian></student_guardian>
<div ng-show='!!student.grade'>
{{student.grade}}
</div>
<div ng-show='!student.grade'>
<button class="btn btn-success" ng-click="setGrade(student)">set grade</button>
</div>
</div>
</div>

Now we have a nested directive studentGuardian inside the main directive studentDetail. And the studentGuardain directive works with the shared scope. We got a similar kind of requirement to expand and collapse the guardian section.

Let us start by adding ng-click and ng-show to the studentGuardian directive template. Now we have two divs on the studentGuardian directive template. One will be displayed in expanded mode and the other in collapsed mode.

<div class="well" ng-show='isHidden' ng-click="showGuardian()">
Guardians::::::
</div>
<div class="well" ng-show='!isHidden' ng-click="hideGuardian()">
Guardians:<br />
Father : {{student.guardian.father}}<br />
Mother : {{student.guardian.mother}}<br />
</div>

Next is the studentGuardian directive as in the following:

Add a controller
Add isHidden data to the $scope of the studentGauradian template. We have isHidden data in the $scope of the studentDetail directive also. On purpose we are giving the same name to see the behavior of the inherited scope
Added two functions hideGuardain and showGuardain to set the value of isHidden to false and true respectively
The Value of the scope property is set to true.

The modified directive is listed next.

myApp.directive('studentGuardian', function () {
return {
templateUrl: "studentGuardian.html",
restrict: "E",
scope: true,
controller: function ($scope) {
$scope.isHidden = false;
$scope.hideGuardian = function () {
$scope.isHidden = true;
console.log('h' + $scope.isHidden);
};
$scope.showGuardian = function () {
$scope.isHidden = false;
console.log('s ' + $scope.isHidden);
}
}
}
});

On running the application in the browser, we will find that now the guardian can be expanded and collapsed separately. If we change the value of scope to false then when we click in guardian the entire panel will be collapsed/expanded since the isHidden variable is shared in the shared scope.

Summary

In this article we learned about directives, custom directives and scopes in anularJS. In the next article we will focus on decorator directives, the link function and so on. I hope you find this article useful. Thanks for reading.

Up Next

Ebook Download

View all

AngularJS Recipes

Read by 8.5k people

Download Now!

Learn

View all