AngularJs :: Create Custom Directives

AngularJs has an essential segment called "Directives", used to enhance the capability of HTML by extending its attributes and making new one as your application requirements and with numerous implicit one's.

Directives used to manipulate DOM elements and also it can change the behavior of DOM element by adding custom functionality.

Image Courtesy from Internet

AngularJs built-in directives :

• ng-init
• ng-app
• ng-click
• ng-show
• ng-model
• ng-repeat

Image Courtesy from Internet

By using 'ng-' prefix, AngularJs directives extends HTML attribute.

Sometimes a question popups into our mind that why Directives used?

Directives are designed to create standalone reusable component which can be used in applications required an existing element with different functionality. Very common example is <input> button with date-picker functionality.

Directives used to make HTML more interactive by adding event listeners.

Best Practices : All DOM manipulations should be done by directives only no controller should be involved to manipulate DOM.

To create a your own directive (Custom Directive), there is a list of steps :

• Create a new html tag like <test></test>.
• Name of html tag should follow the camelCase naming convention. If directive name is like "myTestTag", then this should be invoke like <my-test-tag>. Name should be separated by -.
• Define custom directive using .directive function with the same name as custom html tag.

Below is the example of custom directive :

var app = angular.module('myapp', []);
app.directive('test', function() {
  return {
      restrict: 'AE',
      template: '<h3>Hello World!!</h3>'
  };
});

Here,

directive function used to create directive which returns an object called as Directive Defination Object(DDO) in its callback function.
'restrict' option used to specify that how directive will be used as element, class, or attribute.
There are few predefined valid values for restrict option.

'A' - directive will be used as attribute i.e. <div test></div>
'E' - directive will be used as element i.e. <test></test>
'C' - directive will be used as class i.e. <div class="test"></div>
'M' - directive will be used as comment i.e. <!- directive:test ->

By default restrict has option 'EA' that is we can use it as class and attribute.
Its recommend that custom directive doesn't support by IE and older browser so we should not use it as element.

A custom directive just replaces the component for which it is initiated. AngularJS application during bootstrap finds the matching components and do one time action utilizing its compile() method of custom directive then process the element using link() method of the custom directive based on the scope of the directive.

Another option of DDO object is 'scope', used to distinguish each element based on criteria.

Found a very simple example of custom directive usage here.

Hope this article will be useful.