Custom directives in AngularJs

We will talk about AngularJs Custome directive.

Already AngularJs is packed with powerful directives, but we want to create our own directive for reusable functionality.
In this blog, we will focus on how to handle the easy way to complex process of creating directives.

First we will start with AngularJs own directives and explain the process further in blog.

Before start making your own directive, first you need to understand what directives actually.
In AngularJs directives are core functionality that will run when the DOM is compiled by the compiler.

AngularJs directives such as ng-click, ng-show/ng-hide, ng-repeat,and many others will get from AngularJs core script.

Even build-in directives cover many scenarios but sometime we need to custom directives for different scenario.

So let's time to start for custom directives but before going forward I assume that you already know the basic AngularJs and what directives are and how they are used.

First fall we talk about how many way we can define directives. following are the ways to define and use directives.

1) As an attribute: (Restrict option : 'A')

<div custom-directives></div>

2) As a class: (Restrict option : 'C')

<div class="custom-directives : expression;"></div>

3) As an element: (Restrict option : 'E')

<custom-directive></custom-directive>

4) As a comment: (Restrict option : 'M')

< !--directive: custom-directive expression  -->

So let's time to  go through some example's

angular.module('directivesModule').directive('ngCustomDirective', function () {
                return {
                    restrict: 'A', //E = element, A = attribute, C = class, M = comment
                    template: 'Name: {{customer.name}}
City: {{customer.city}}'
                };
            });

 How to invoke above directive code in html. see below html snippet.

<div ng-customdirective></div>

 
You have notice one thing when we invoke it, directives name is not same as we define ( ngCustomDirective  vs ng-customedirective). This is because AngularJS will handle translating the camel cased name when we define it to the snake case when we invoke it.

Output of above directive invoke:
Name: Kalpesh
City: Ahmedabad

Hope you get idea about custom directive.