JavaScript has become a powerful way for companies engaging in product development to create a great UX and showcase an attractive UI.

Directives are like a plugin to DOM elements which are identified by the AngularJS HTML compiler to render. AngularJS comes with many in-built directives to enrich HTML. For a more programmer friendly environment, AngularJS provides the facility to write our own custom directive. Directives give the freedom to write more structural UI controls. It’s easy to use and effective to maintain. There are 4 types of directive introduced by AngularJS.

  • Element directives (E)
  • Attribute directives (A)
  • CSS class directives (C)
  • Comment directives

Using restrict options in a directive allows you to can prevent it from binding to any type. The name of a directive is case sensitive. One suggestion is to use camel Case to present a directive name. Here’s an example with ngTable. While embedding a directive in HTML we typically use lower case dash-delimited attribution on DOM elements. In this example of the ngTable directive we use ng-table in the HTML.

Example: Using the ngTable Directive
<ng-table tbl-width=”900″></ng-table> 


So that we are clear about the full features of a directive, let’s discuss the available options. To create a directive you need to create a module first. Inside that module, using the directive keyword, you can create a custom directive. A directive is essentially a function with a return value.

Example: Creating a Directive using AngularJS

Zymr blogger, Zymr, Inc.