Creating the Custom Directives in AngularJs

Introduction

Directives are one of the important components which help you to add special behaviour to the DOM element (attribute, name, CSS or class). You have built in directives provided by AngularJs, i.e., ng-model, ng-repeat, etc. You can also create your own custom directives with different parameters as ‘Restrict’, ‘Template’, ‘TemplateUrl’, ‘Controller’, ‘Link’. I will explain each and every parameter in this article.

Outline

1. Including template parameter
2. Including TemplateUrl parameter
3. TemplateUrl function parameter with elem and attr
4. Restrict parameter
5. Isolate scope

Background

Before going through this article, you should have basic knowledge of Angularjs, HTML and JavaScript.

Using the Code

Simple Examples to Illustrate Directives

1. Including Template Parameter

We have created a directive 'myDirective' which would add behaviour to the DOM element. The defined template would be returned with specific data in place of element.

PersonController.js

angular.module('simpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.person = {
    name: 'Paul',
    address: '1600 Toronto'
};
}])

Person.html

<div ng-controller="Controller">
  <div my-directive></div>
</div>

The output for the above:

"Name: Paul Address: 1600 Toronto"

2. Including TemplateUrl Parameter

We have created a ‘myDirective’ directive as same before but use different object parameter templateUrl. It can also be a function which returns the URL of an HTML template to be loaded and used for the directive.

PersonController.js

angular.module(‘simpleDirective’, [])
.controller(‘controller’, [‘$scope’, function($scope)) {
$scope.person = {
Name: ‘Paul’,
Address: ‘1600 Toronto’
};
}])
.directive('myDirective', function() {
  return {
    templateUrl: 'my-Directive.html'
  };
});

Person.html

<div ng-controller="Controller">
  <div my-directive></div>
</div>

my-directive.js

Name: {{ person.name}} Address: {{ person.address}}

The output is same as before:

"Name: Paul Address: 1600 Toronto"

3. TemplateUrl Function Parameter with elem and attr

PersonController.js

angular.module(‘simpleDirective’, [])
.controller('Controller', ['$scope', function($scope) {
  $scope.person = {
    name: ‘Paul’,
    address: '1600 Toronto’
  };
}])
.directive('myDirective', function() {
  return {
    templateUrl: function(elem, attr) {
      return ‘person-' + attr.type + '.html';
    }
  };
});

In the same way, we created ‘myDirective’ directive but use different directive object parameter templateUrl function which includes attribute value as we can’t access the scope inside the function.

4. Restrict Parameter

The restrict option is typically set to:

• 'A' - only matches attribute name
• 'E' - only matches element name
• 'C' - only matches class name
• 'M' - only matches comment

By default, it will be ‘AEC’. We can change accordingly.

<div ng-controller="Controller">
    <my-person></my-person>
</div

Best Practice: You should always use an element when you are creating a component that is in control of the template and an attribute when you are decorating an existing element with new functionality.

We have created a directive as it can be used by element. Right?

Yes, but what if we want to use it multiple times in the template. We will use repetitive elements with directive name. It can fulfil our need but that’s not the appropriate approach in terms of performance and maintainability.

Contrary, is there any best way to use directive multiple times in the template?

Yes, you can do that!! Here, the isolate scope comes into the picture. You can achieve it through isolate scope.

5. Isolate Scope

As you are aware of scope & lifecycle of a scope, we can use the scope & its properties inside the controller. We will learn how we can pass the scope values or use scope values inside the directive in next article.

Points of Interest

Manipulating or changing the behavior of the DOM using Angular directives.

History

• 11^th February, 2018: Initial version