AngularJs Directives

In this post we are going to see about the directives in AngularJS. Also the types of the directives and how the directives helps in running a jquery plugin in Angular.

A directive in the AngularJS is a reusable component. Directives in AngularJS covers all the behavioural properties and functionalities of an element in a correct way, thereby keeping all of the functionality together. Rather than tracking the changes on a global level, this helps to keep track of  the changes of one HTML section in one place in a script.

Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tells the AngularJS’s HTML compiler ($compile) to attach a specified behaviour to that particular DOM element (e.g. via event listeners). It can be used even to transform the DOM element and its children.

Example Directives:

Custom directives:

The Custom directives are used in the AngularJS to extend the functionality of HTML. Custom directives are defined using a “directive” function. A custom directive can simply replace the element for which it is activated. AngularJS application during bootstrap finds the matching elements and do an one time activity using its compile() method of custom directive and then process the element using link() method of the custom directive. It does it based on the scope of the directive.

Example:

Directive types

$compile can match the directives based on  the element names, attributes, class names, and also as comments.

All of the Angular-provided directives match the attribute name, tag name, comments, or class name. The code below demonstrates the various ways a directive (myDir in this case) can be referenced from within a template:

Element directives − Directive activates when a matching element is encountered.

Attribute − Directive activates when a matching attribute is encountered.

CSS − Directive activates when a matching css style is encountered.

Comment − Directive activates when a matching comment is encountered.

Restrict

The “restrict” attribute tells Angular, with one letter, how are we going to create our new directive. A Restrict can take four different values ‘E’, ‘A’, ‘C’, ’M’ or combination of them such as ‘EA’, ‘AC’. Each one has it’s own meaning. Below are the example given for each restrict attribute with the code sample to demonstrate.

 

Restrict	Meaning	Example
E	Implies we are going to use our directive as a new HTML element.	<my-todo list=”todo” title=”Element”> </my-todo>
A	Means that our directive is going to take over any HTML element that has an attribute that matches our directive name.	<div my-todo list=”todo” title=”Attr”> </div>
C	Indicates that our directive will be found in CSS classes.	<div class=”my-todo” list=”todo” title=”Class”> </div>
M	Matches HTML comments.	<!–directive:my-todo attributes goes here–>

Element Directive:

Arrtibute directive:

Class Directive:

Comment Directive:

jQuery Plugins as Angular Directives

jQuery Plugin

On their own, jQuery plugins are easy to use: just initialize the plugin in  a document.ready event.

jQuery Plugin in an Angular App

Using a jQuery plugin in an Angular app is tricky task. Unfortunately you cannot just move the initialization into your controller. It is not only a bad practice, but Angular won’t be aware of any changes to or interactions with the plugin. This means that data binding with the plugin will be broken.

Use $scope.$apply()

You can restore Angular’s data binding by using $scope.$apply(). This method hooks into Angular’s digest cycle, thus making your app aware of the changes made by the jQuery plugin to any of the $scope properties.

Creating a slider JQuery plugin as directive:

To make a jQuery plugin code reusable, you can create a directive for the plugin. Any plugin initialization code should go in the directive’s link method. And then Include the directive in your HTML.

jQuery plugin as AngularJs Directive.

Example :

Conclusion:

You can see that with the help of directives we were able to run a jquery plugin in Angular. This helps in many ways to run the plugins which are not available in Angular with the help of jquery. Also we have seen in detail the types and usage of the directives in Angular.

Sasikala J,
Junior Developer,
Mallow Technologies.