Post
Ask Question

Directives In AngularJS

In this article, we will learn about Directives in AngularJS application. Before starting, I suggest you read my previous articles in this series.
Directives are one of the core features of AngularJS. Directives allow us to extend HTML with new attributes, elements, and classes. Directives are used for DOM Manipulation, Data Binding, Loading View, Events firing, etc. We can define directives in multiple ways:

 

Some of the directives like ng-view etc. can be used as custom element.
 
In this Article, we will see some built in AngularJS directives. In this series, we have already seen some of the Directives like ng-app, ng-model, ng-controller, ng-bind etc. so, I am not going to cover them again. 

1. ng-init: ng-init is used to initialize special properties for ng-repeat directive and for injecting data via server side scripting language in AngularJS applications. It is recommended to use controller for initializing a property/model in AngularJS application.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5.     <script src="Script/angular.js"></script>  
  6. </head>  
  7. <body ng-app>  
  8.     <!--Here we initialize Name property using ng-init Directive-->  
  9.     <div ng-init="Name='Anoop'">  
  10.         <h3>ng-init Example</h3>  
  11.         Name: <input type="text" ng-model="Name"/>  
  12.     </div>  
  13. </body>  
  14. </html>  
Preview:
 
2. ng-repeat: ng-repeat directive repeats html elements for each item in a collection. It is much similar to foreach loop in C# or other programming language.

Example:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Directive Demo</title>  
  5.     <script src="Script/angular.js"></script>  
  6. </head>  
  7. <body ng-app>  
  8.     <!--Here we initialize Names property using ng-init Directive-->  
  9.     <div ng-init="Names=['Anoop','Akshay','Ajay','Abhishek','Arjun']">  
  10.         <h3>ng-repeat Example</h3>  
  11.         <ul>  
  12.             <!--ng-repeat directive repeats html elements for each item in a collection.-->  
  13.             <li ng-repeat="name in Names">{{name}}</li>  
  14.         </ul>  
  15.     </div>  
  16. </body>  
  17. </html>  
Preview:
 
Example: Fetch data from Array of Objects using ng-repeat. 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Directive Demo</title>  
  5.     <script src="Script/angular.js"></script>  
  6. </head>  
  7. <body ng-app>  
  8.     <!--Here we initialize Employees property using ng-init Directive-->  
  9.     <div ng-init="Employees=[  
  10.         { Name: 'Anoop', City: 'New Delhi' },  
  11.         { Name: 'Akshay', City: 'Mumbai' },  
  12.         { Name: 'Ajay', City: 'Punjab' },  
  13.         { Name: 'Arjun', City: 'Haryana' }  
  14.     ]">  
  15.         <h3>ng-repeat Example</h3>  
  16.         <table border="1" style="border-collapse:collapse">  
  17.             <tr><th>Name</th><th>City</th></tr>  
  18.             <!--ng-repeat directive repeats html elements for each item in a collection.-->  
  19.             <tr ng-repeat="Employee in Employees"><td>{{Employee.Name}}</td><td>{{Employee.City}}</td></tr>  
  20.         </table>  
  21.     </div>  
  22. </body>  
  23. </html>  
Preview:
 
3. ng-show/ng-hide Directive: ng-show/ng-hide directive allow us to show or hide different HTML elements based on the expression passed to that directive.

Example of ng-show directive:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>ngshow Demo</title>  
  5.     <script src="Script/angular.js"></script>  
  6. </head>  
  7. <body ng-app>  
  8.     <h3>ng-show Example</h3>  
  9.     <!--Binding checkbox value with isVisible property using ng-model directive-->  
  10.     <input type="checkbox" ng-model="isVisible" /> Show Div  
  11.     <!--Here we pass isVisible expression to ng-show Directive-->  
  12.     <div ng-show="isVisible">  
  13.         Name: <input type="text" />  
  14.     </div>  
  15. </body>  
  16. </html>  
Preview:

 
 
Example of ng-hide directive:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>ng-hide Demo</title>  
  5.     <script src="Script/angular.js"></script>  
  6. </head>  
  7. <body ng-app>  
  8.     <h3>ng-hide Example</h3>  
  9.     <!--Binding checkbox value with isHidden property using ng-model directive-->  
  10.     <input type="checkbox" ng-model="isHidden" /> Hide Div  
  11.     <!--Here we pass isHidden expression to ng-hide Directive-->  
  12.     <div ng-hide="isHidden">  
  13.         Name: <input type="text" />  
  14.     </div>  
  15. </body>  
  16. </html>  
Preview:

 

4. ng-Click: ng-click directive updates the model/property of AngularJS application when an element is clicked.  
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>ngClick Demo</title>  
  5.     <script src="Script/angular.js"></script>  
  6. </head>  
  7. <body ng-app>  
  8.     <!--Here we initialize count property using ng-init Directive-->  
  9.     <div ng-init="count=0">  
  10.         <h3>ng-click Example</h3>  
  11.         <!--Increasing and Decreasing the value of count expression using ng-click directive-->  
  12.         <button ng-click="count=count+1">Increase Value by 1</button> <button ng-click="count=count-1">Decrease Value by 1</button>  
  13.         <p>Count={{count}}</p>  
  14.     </div>  
  15. </body>  
  16. </html>  
Preview:

 

Please visit for reading more about various built in directives.

Hope you liked it. Thanks!
 
Read more articles on AngularJS:


Similar Articles