Custom Directive In AngularJS

This blog describes how to use Custom Directive in AngularJS.

Introduction

AngularJS facilitates extending the HTML, with new attributes, called "Directives". It provides a set of built-in directives that offer functionality to your applications, like ng-app, ng-init, ng-model. AngularJS also enables us to define our own custom directives.

Using Code

Let's create a custom directive, with the following code.

<script>
   var app = angular.module("myApp", []);
   app.directive("myOwnDirective", function() {
      return {
        template : "<h1>This is my directive!</h1>"
      };
   });
</script>

We can call/use a custom directive in the following four ways.

1. Attribute
   <div my-own-directive></div>
   
   
2. Class
   <div class="my-own-directive"></div>
   
   
3. Element name
   <my-own-directive></my-own-directive>
   
   
4. Comment

<script>
var app = angular.module("myApp", []);
app.directive("myOwnDirective", function() {
    return {
        restrict : "M",
        replace : true,
        template : "<h1>This is my directive!!</h1>"
    };
});
</script>

<!-- directive: my-own-directive -->

From the above discussion, we can see that we can use directives in different ways. It is always recommended to use the directives through tag name and attributes over comment and class names. It will be easier to determine what directives an element matches.

 

Note: You might be confused that directive name (myOwnDirective) is different when we use it (my-own-directive). Directive name follows camel case and the implementation follows hypen(-) in the next capital letter.

 

Properties of Custom Directive 

 

replace

The replace property in directives indicates that the element to which the directive is being applied (<my-own-directive> in that case) should remain (replace: false) and the directive's template should be appended as its child.

<div ng-controller="Ctrl" class="ng-scope">
    <div class="ng-binding">hello</div>
</div>

With replace as false, it looks like below.

<div ng-controller="Ctrl" class="ng-scope">
    <my-dir>
        <div class="ng-binding">hello</div>
    </my-dir>
</div>

The below code sample tells how to use replace properties.

var app = angular.module("myApp", []);
app.directive("myOwnDirective", function() {
    return {
        restrict : "A",
        replace: true,
        template : "<h1>This is my directive!!</h1>"
    };
});

restrict

We can restrict calling custom directives by using restrict attribute. It means if we use restrict attribute, then directive works only for the same module. The attribute values are:

A -> Attribute
C -> Class
E -> Element name
M -> Comment

Default value is EA (Element and Attribute).

var app = angular.module("myApp", []);
app.directive("myOwnDirective", function() {
    return {
        restrict : "A",
        template : "<h1>This is my directive!!</h1>"
    };
});

The above directive will be available in attribute only, like:

 

<div my-own-directive></div>

 

transclude

 

It specifies whether to transfer and include the original inner content of the directive’s HTML markup in the destination markup (which is defined in the template) or not. It appends the content but replace property replaces the whole content.

var app = angular.module("myApp", []);
app.directive("myOwnDirective", function() {
    return {
        restrict : "A",
        transclude : "true",
        template : "<h1>This is my directive!!</h1>"
    };
});

template

It specifies the HTML content that will be added to the HTML result of the directive use.

var app = angular.module("myApp", []);
app.directive("myOwnDirective", function() {
    return {
        template : "<h1>This is my directive!!</h1>"
    };
});

Link

 

It facilitates adding more dynamic HTML content, based on the data.

var app = angular.module("myApp", []);
app.directive("myOwnDirective", function() {
    return {
        restrict: 'E',
        transclude: 'true',
        template: '<span ng-transclude></span>',
        link: function(scope, element, attr){
            element.append("<strong>" + attr.name + "</strong>");
            if(attr.pid === '0'){
                element.append("<br> No Project");
            }
            else {
                element.append("<br> Project Exists");
            }
        }
    };
});

<!-- Add below HTML content-->

<div ng-app="myApp" ng-controller="myController">
    <div ng-repeat="user in user">
        <my-own-directive title="{{user}}">
            User Name :
        </my-own-directive>
    </div>
</div>

Conclusion

We discussed how to use custom directives in AngularJS. Directives are useful in creating repeatable and independent code. It helps to make JavaScript code less messy and more organized.

Hope this helps.