Custom Directives in Angular JS

Before a month ago, I have written some articles about Angular JS. I have explained about Directives and Custom Directives in one those article which you can see here. Last Saturday I have attended a seminar which was about Directives and custom Directives in Angular JS. So, Sharing my learning experience with my readers.The session was conducted by Tech Enthusiast and JavaScript Expert Hardik Patel of RapidOps Solutions Pvt. Ltd. (www.rapidops.com).

Angular JS is MVC structure which is basically useful for data binding from view to controller and controller to view.I have explained basic about Angular JS on my previous article.You can learn How to get started with Angular JS.

What is Directive in Angular JS?

The directive is a unique and powerful feature available in Angular JS.

The directive is a used to manipulate the DOM elements through the framework with a simple declarative syntax which simplifies DOM operation logic.

The directive is a reusable an independent component which can perform the specific action. Like you have certain directives so whenever includes that particular element to execute template along execute a function.

For Example, You want to create the custom tag like date picker in HTML so using jQuery or another library, you can not create the custom Tags in HTML whereas Angular JS provides such functionality which is known as Directives.

You can write if, switch condition or loop in HTML using the directive in Angular JS. The directive provides the behavior driven Development so they basically change the behavior of html attribute.

Why Directives?

As we discussed, Directives are the heart and soul of Angular JS which makes angular JS different from the other JavaScript Frameworks.There are many key features of directives which we will see in this article.The directive is a powerful tool that can be used to manipulate and modify the DOM.

What is Custom Directive in Angular JS?

As per the definition of the directive, It is a code fragment which you can use to manipulate the DOM. Custom Directive is the reusable component to extend the basic HTML element.It is used to change the behavior of the HTML attribute and add some attributes.

Declarative:

In jQuery, You want to bind any element, you will use the id or class and write the code.But you have used element or class and the same element apply to your parent scope which can create conflict in your jQuery code. So using Declarative in Angular JS, You can declare the element or attribute which can be easily located and find.

Modularize:

Whenever you are using MVC framework, You might need code re-usability with which you can easily utilize the code whenever you want in your or other application. For example, plugin, you just plug and play with it which reduce the development time for the same functionality.

You can create the module in Angular JS which will work like copy and paste. So, You can write code once in your application using the module and in case you want to use same the code in another application, You just need to copy and paste that file in that application. That’s it. Your functionality will start to work.

Reusable approach of the context:

This is the best feature of Angular JS. For example, Suppose you have some stores and you want to list out your store list in a page. So, You just need to create HTML snippet and directive for that HTML snippet. Next, pass data and paste the directive code into the HTML element or attribute and your functionality will start working with few lines of code.

Keep it Global

When you are working with JavaScript, your global functionality which is directly written in DOM ready, it is global and it might create the issue if you want to make some changes at a local scope.

In Angular JS, You have created a directive, and you can use the element or attribute at many places in your file without affecting another scope. Directive maintains the local scope for the element. Whenever you change the data, the directive will change the local scope.It will not affect the another or parent scope.

In-Built Directives

Angular comes with a set of built Directives.There are so many built in directives in Angular JS. Let’s see the in built Directives:

You might have used one of the above directives if you have developed the single application or example using Angular JS.

Types of Directives

There are four types of directives in Angular JS. Here is the list of directives.

1. Element: You can create your own HTML tag or element. It

Example:

1 2 3

<my-dir></my-dir>

2. Attribute:

You can create your own attribute in HTML tag. For example, You can create your own attribute in jQuery using data attribute. If you don’t have an idea about data element in HTML5. Read our article: How to Use HTML5 Data Attributes.

So, Same like this you can create any custom attribute.

Example

1 2 3

<div my-dir>Hello World</div>

3. Class:

You can pass the custom HTML element as the class and use that element as per your requirement.

4. Comment:

Mostly, Don’t prefer to use the class and comment directives, because the older version of Internet Explorer (IE) does not support the directives.

How to Create Directives in Angular JS?

You can create directives in Angular JS using the .directive() method and this method accept the two arguments.

1. Directive Name
2. Config Object : It is also known as the Directive Defination Object (DDO).

First is the name of the directive and second is the configuration function defines the behavior of the directive.

Invoke Directives:

1. Naming Conventions: Naming Convention helps to understand the structure of your declaration. Angular JS have following types of Naming Conventions supported.
1 2 3 4 5 6 7

ng:directivename (ng:model) ng-directivename (ng-model) ng_directivename (ng_model) x-ng-directivename (x-ng-model) data-ng-directivename (data-ng-model)

You can use : (colon), – (hyphen), _ (underscore), x, data, any convention from above to declare the directive. I recommend to use the ng-directivename, as it is commonly used.

2. camelCase Identifier: It is mandatory to use camelCase format for declaring a directive or creating directive Name. if you not follow this convention, directive will not render HTML in your Angular JS.

   For Example, Here My directive name is “myDirective” so I have written it in camelCase.

   1 2 3

   .directive('myDirective'),function(){{});

Directive Configuration options

Inject Dependencies: You want to inject the timeout of HTTP request or you are making ajax call in the function.

DDO (Directive Definition Object): Basically, Directive have Link function and if you don’t want to go with link function, You can use DDO.

Directive Parameters:

Now, let’s understand the set of parameters directive support.

1. Restrict (EAC):

You can restrict your directive with the restrict property where you can restrict with element, attribute, controller or model. Whatever value you use in restrict property, directive will be restricted to that specific directive.

Here is the option for Restrict and It defines how the directive can be used:

• ‘E’ (element) – matches element name
• ‘A’ (attribute) – matches attribute name.
• ‘C’ (class)- matches class name.
• ‘M’ (comment) – matches with comments.

where the default value is A.

As an element:

1 2 3

<my-dir></my-dir>

As an attribute:

1 2 3

<div my-dir></div>

As a class:

1 2 3

<div class=" my-dir: expression;"></div>

As a comment:

1 2 3

<!-- directive: my-dir expression -->

2. Priority:

Priority is a concept to set the order of execution. Suppose, You have two or three directives in your page and your one directive is dependent on another directive. To wait for the first directive to complete and then start the next directive, you can set the priority.

So, When multiple directives defined at the same DOM element and you want to create their execution order. At that time, Priority is useful

Default value for priority is zero(0). Highest priority(999) executed first.

3. Replace:

When you want to replace element or attribute, you can pass the true else it will append the data.

True: Replace the current element with the template.
False: Append the directive to the current element

4. Template/TemplateURL:

Template is used for adding the inline HTML string or element in double or single quote Whereas TemplateUrl is used to load the HTML from the external or internal file.

Template is faster than the TemplateUrl so if you have around 3 – 4 lines of HTML code, use the template else it is better to use the TemplateUrl. TemplateUrl is best for binding HTML for large no of HTML tags.

5. Link Function:

Link function is used for attaching the event listener to DOM element, watching model properties for changes and updating the DOM.You can easily bind the events(mouse over, click, etc) using link function.

Basically, Link function will deals with the DOM elements whenever you apply the property to the event listener.

SYNTAX:

Syntax of link function is

1 2 3

function link(scope, element, attrs, controller) { ... }

Link function accept the four arguments:

1. Scope: Scope passed to the directive. There are three types of scope which will see later in this article.
2. Element: You can find the DOM object which contain the property of DOM.
3. Attribute: Object containing the HTML attribute and values.
4. Controller: Reference to inherited controller Object(optional).

After all this explanation, Let’s start with the examples which will clear all your

Element Example

First, I will show you an example how you can use restrict and template in Angular JS.Let’s dive into the code first.Here is the Javascript snippet

Here, I will create simple directive using element property.

JAVASCRIPT

In this, I have first used the angular module and with that passed .directive() method and as I said it accept two parameters. So, Here first is the name of the directive which is userInfo and second is the function which have restrict and HTML template.

Now, Let’s see the HTML snippet which is very simple code:

HTML

Here, I am explaining about custom directives so it is kind of custom tag in HTML. So, As defined in the directive() method, you can that directive name in HTML to display the template.

Attribute Example

Next, If you want to use directive as HTML attribute,You can declare HTML like below:

HTML

And change the restrict in the angular js code, Let me show the code to understand how it works

JAVASCRIPT

In above code, I have added A in restrict to allow attribute as the directive in Angular JS.In example restrict ‘AE’ indicates that instructions are are declared in the DOM as the element and attribute.

After this, Next I will show you how you can use directive in your HTML element like explained in the following example:

Class Example:

HTML

In above code, I have used HTML span tag and in that created a class which is “user-info”. Now, you want to see it in action so it is time to see the JS code.

JAVASCRIPT

In above JS code, I have just added one more restrict option which is for the controller so it will allow you to replace the element value in HTML elements or attributes.

Scope:

In Angular JS, Controller is responsible for routing the various requests and return the response to the view and stick to the model and the view whereas view is bound to provide a model is known as scope in Angular JS.

There are three types of scope

Types of Scope:

1. Shared Scope: Scope contain by controller,that scope will be shared with directive.
1 2 3

Example, scope: false

2. Inherited Scope: Scope of controller, will be inherited to directive. $scope as true in property DDO, whatever changes made is directive that will not be reflect in controller.
1 2 3

Example, scope: true

3. Isolated Scope: It is very important scope in Angular JS. It is used to create the isolate scope for each instance of the directive.Isolate scope is a way to pass individual things from the parent scope to the directive scope without inherit.
   1 2 3

   Example, scope: {}

   It has three parameters:

   • @ ( At-The-Rate) – The value of the attribute will be passed to the property line of Scope Directive.
   • = (equal to) – Directive scope property will bind to the object named in the attribute for two way binding.
   • & (Ampersand) – This Directive property will interprets the function expression contained in the attribute.&(Ampersand) is used to bind the parent scope and the attaching the property into a function such as string or array of objects.