Overview Of AngularJS Directives

What is AngularJS?

AngularJS is a JavaScript Framework that is very powerful and its library is written in JavaScript. This framework is used to make single page applications. From this definition, you should get an idea that if we want to make a Single Page application, AngularJS is the answer as the most powerful JavaScript Framework. AngularJS extends the HTML with new attributes. AngularJS allows us to write applications in a clean Model-View-Controller way.

What is a Directive?

These are markers on a DOM that tell the compiler of AngularJs to attach a specific behavior to that DOM element.

AngularJS helps to extend HTML, using directives. AngularJS has some built in directives and it also lets us define our own directives. Basically, AngularJs directive is the extended HTML with prefix ng.

Some built in AngularJS Directives are given below.

  • ng-app- This initializes the AngularJS Application. It defines the root of Angular Application.
  • ng-init- This initializes the application's data.
  • ng-model- This directive binds the values of AngularJS application data to HTML input controls.
  • ng-bind- This directive binds the application data to View (HTML View).

After reading this, we must have a question in our mind about what the HTML compiler is. What does it mean to compile HTML? In AngularJS, compilation means attaching the directives to HTML elements to make them attractive in order to transform the elements.

Some AngularJS defined directives are given below.




Defines the root element of an application.


Binds the content of an HTML element to application data.


Binds the innerHTML of an HTML element to Application data and also removes dangerous code from the HTML string.


Specifies that the text content should be replaced with a template.


Specifies a behavior on blur events.


Specifies an expression to evaluate when the content is being changed by the user.


Specifies if an element is checked or not.


Specifies CSS classes on HTML elements.


Same as ng-class, but will only take effect on even rows.


Same as ng-class, but will only take effect on odd rows.


Specifies an expression to evaluate when an element is being clicked.


Defines the controller object for an application.


Specifies a behavior on copy events.


Specifies a behavior on cut events.


Specifies a behavior on double-click events.


Specifies if an element is disabled or not.


Specifies a behavior on focus events.


Specifies an HTML form to inherit the controls from.


Hides or shows HTML elements.


Specifies a URL for the <a> element.


Removes HTML element, if a condition is false.


Includes HTML in an application.


Defines initial values for an application.


Specifies that the application must use a library, like jQuery.


Specifies a behavior on keydown events.


Specifies a behavior on keypress events.


Specifies a behavior on keyup events.


Converts text into a list (array).


Specifies the maximum number of characters allowed in the input field.


Specifies the minimum number of characters allowed in the input field.


Binds the value of HTML controls to the application's data.


Specifies how updates in the model are done.


Specifies a behavior on mousedown events.


Specifies a behavior on mouseenter events.


Specifies a behavior on mouseleave events.


Specifies a behavior on mousemove events.


Specifies a behavior on mouseover events.


Specifies a behavior on mouseup events.


Specifies that no data binding can happen in this element, or its children.


Specifies the open attribute of an element.


Specifies <options> in a <select> list.


Specifies a behavior on paste events.


Specifies a message to display according to en-us localization rules.


Specifies the readonly attribute of an element.


Defines a template for each data in a collection.


Specifies the required attribute of an element.


Specifies the selected attribute of an element.


Shows or hides HTML elements.


Specifies the src attribute for the <img> element.


Specifies the style attribute for an element.


Specifies expressions to run on onsubmit events.


Specifies a condition that will be used to show/hide child elements.


Specifies the value of an input element.

Examples of some directive used in examples,

  1. <div ng-app="">  
  2.     <p>FirstName: <input type="text" ng-model="fname"></p>  
  3.     <p ng-bind="fname"></p>  
  4. </div>   

ng-app directive is used in the div tag <div>. This makes this div tag the owner of this AngularJS application, which means this confirms that from this div, we are staring the Angular application and Angular features will be starting from this tag.

ng-model directive, in the input tag, binds the value of this input field to variable “fname.”This fname's value has been assigned by this ng-model. Whatever we type in this input field, the value will be assigned to fname variable. ng-bind directive now binds the value, which was assigned to the variable “fname”, to innerHtml of the <span> tag.

Now, if we run the application we will see the screen, as shown below.

We can also describe it by using Angular expression.

  1. <div ng-app="" ng-init="fName='Jasbeer'">  
  2.     <p>Name: <input type="text" ng-model=" fName "></p>  
  3.     <p>You wrote: {{ fName }}</p>  
  4. </div>   
Here, ng-app tells AngularJS that the owner of the Application is <div> tag. The {{ fName }} expression used in the example is the AngularJS data binding expression. It binds AngularJS expressions with AngularJS data. The expression {{ fName }} is connected with ng-model. Whatever n-model will have the value of fName variable, the expression {{ fName }} will get the same. If we run this program, we will get the output given below.

Here, we will see that the input box will be pre-filled with data “Jasbeer”, as we have provided in the directive ng-init. ng-init is used to initialize the data.

Let’s check one more directive ng-repeatng-repeat directive actually works like  thefor loop. It clones HTML elements once for each item in a collection.

Suppose we have an array, where we store student names. We will display the student names one by one in a collection. We will use ng-repeat for it. First, we will set the array with student names, using ng-init, which will initialize the student names in a variable, then we will use this variable in ng-repeat to repeat the items in a collection.

Suppose we have an array of student names.

  1. studentNames=['Jasbeer','Manpreet','Jatinder']   

We will initialize this, as shown below.

  1. ng-init="studentNames=['Jasbeer','Manpreet','Jatinder']"   
We will write the code to use ng-repeat, as shown below.
  1. <div ng-app="" ng-init="studentNames=['Jasbeer','Manpreet','Jatinder']">  
  2.     <ul>  
  3.         <li ng-repeat="x in studentNames">  
  4.             {{ x }}  
  5.         </li>  
  6.     </ul>  
  7. </div>  

Here, in the first line, we are initializing the studentNames, followed by repeating each item of the array, which was set in the variable studentNames.

There are many Angular directives and you can use them whenever needed. Now, we will see how can we create our own directive; i.e., a Custom Directive.

Creating Custom Directives

Before writing a directive, we must know how Angular’s HTML Compiler $compile determines when to use a given directive.

Element matches a directive when the directive is a part of its declaration. We can have

  1. <my-directive>{{fName}}</my-directive>   

Here, <my-directive> element matches the mydirective directive. $compile matches the directive, which is based on the element name, attributes, class names and comment.

We can create our own AngularJS directives. To create the directives, we first have to register our directives. The directives are registered on the modules. We will learn about the modules later.

We use module.directive API to register a directive. Directives are created, using .directive function. We should make HTML element with the same tag name as of directive to invoke the directive. The directives are always created, using camel case name like myDirective, but when we have to invoke it, we must use “-“ separated name like my directive.

Module.directive takes the normalized directive name, followed by the factory function and factory function returns an object with the different options to tell $compile that how the directive should behave when matched with HTML element.

Now, let’s create a directive in AngularJS.

  1. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">    
  2. <head>    
  3.     <meta charset="utf-8" />    
  4.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>    
  5.     <title>Custom Angular Directives</title>    
  6. </head>    
  7. <body ng-app="myApp">    
  9.     <my-directive></my-directive>    
  11.     <script>    
  12.         var app = angular.module("myApp", []);    
  13.         app.directive("myDirective"function () {    
  14.             return {    
  15.                 template: "<h1>Created custom directive!</h1>"    
  16.             };    
  17.         });    
  18.     </script>    
  20. </body>    
  21. </html>   

You can see we have initialized the directive by using the element name as my-directive here.

  1. <my-directive></my-directive>   

We can invoke the directive by using element name, attribute, class and comment. It will print what will be returned by the factory function by matching the directive name.

If we run this the output will be as shown below.


Restrict Custom Directives: 
We can make the directive invoke by element name, attribute, class or comment by restricting it. We have a restrict property. We can add that property with the value as “A”, “E”, “C” or “M”.

Restrict Values

  • A Attribute
  • E Element Name
  • C Class
  • M Comment.
We can use this, as shown below.
  1. //Restrict property for attribute  
  2. var app = angular.module("myApp", []);  
  3. app.directive("myDirective"function() {  
  4.     return {  
  5.         restrict: "A",  
  6.         template: "<h1>Created custom directive!</h1>"  
  7.     };  
  8. });  
Here, we have restricted it to an attribute only. The directive can only be invoked here by an attribute. For the reference, the command is given below.
  1. <div my-Directive ></div> 
These will produce the same result as displayed by using element name restriction.


  1. <div my-Directive ></div>   

 If we run the code for restrict A, then we will get output like :

  1. <div class="my-directive"></div>   

Let us see this with an example for class restrict.

code :
  1. <!DOCTYPE html>  
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  7.     <title>Custom Angular Directives</title>  
  8. </head>  
  9. <body ng-app="myApp">  
  12.     <div class="my-directive"></div>   
  15.     <script>  
  16.  var app = angular.module("myApp", []);  
  17.         app.directive("myDirective"function () {  
  18.             return {  
  19.                 restrict: "C",  
  20.                 template: "<h1>Created custom directive , Restricted Class!</h1>"  
  21.             };  
  22.         });  
  23. </script>  
  25. </body>  
  26. </html>  
If we run this, we will get the output as :
  1. <!-- directive: my-directive -->   

For comment -- below is an example depicting directive for comment

  1. <!DOCTYPE html>  
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  7.     <title>Custom Angular Directives</title>  
  8. </head>  
  9. <body ng-app="myApp">  
  12.     <!-- directive: my-directive -->    
  14.     <script>  
  15.   var app = angular.module("myApp", []);  
  16.         app.directive("myDirective"function () {  
  17.             return {  
  18.                 restrict: "M",  
  19.                 replace: true,  
  20.                 template: "<h1>Created custom directive , Restricted Comment!</h1>"  
  21.             };  
  22.         });  
  24.     </script>  
  26. </body>  
  27. </html>  
If we run this, we will get an output like below:
Element Name
  1. <my-directive></my-directive>  
If we want to restrict the directive for an element only, then we will use Restrict value : E, Below is an example for Element name
  1. <!DOCTYPE html>  
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
  7.     <title>Custom Angular Directives</title>  
  8. </head>  
  9. <body ng-app="myApp">  
  11.     <my-directive></my-directive>  
  14.     <script>  
  15.   var app = angular.module("myApp", []);  
  16.         app.directive("myDirective"function () {  
  17.             return {  
  18.                 restrict: "E",  
  19.                 template: "<h1>Created custom directive , Restricted Element name!</h1>"  
  20.             };  
  21.         });  
  23.     </script>  
  25. </body>  
  26. </html>  
 We will get the output as shown below:
By default, the value is EA, and it means for both element name and an attribute.
This was about the directives. In the next article, I will explain the Model and data-binding in AngularJS with the examples. Please provide feedback for this article.