Post
Ask Question

Custom Directive in AngularJS: Part One

In web application development, when we want to create a customized application or web site using ASP.Net, then we use user control very often in our projects. But when we want to create or develop a SPA (Single Page Application) based application using normal HTML and Javascript or Angular JS, then we don't have the facility to use the user control option in such a way. But there is a alternate way of user control in Angular JS, and that is Directives.

So the first question arises:  What are Directives?

As per the Angular JS documentation:

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.

In Angular JS, Directives are the below types :-

A (Attribute)

In this directive type, the directive name is used inside standard HTML elements as an attribute.

C(Class)

In this directive type, the directive name can be used inside HTML elements class attribute.

E(Element)

In this way, we did not need to use directive elements inside the HTML tags. We can define our own dom structure as directive and use in the html page directive just like other html tags.

For related information about this type of directive please refer to my earlier article:

Now, in this article, we will discuss about the other two types of directives.
 
For this, we create a Javascript file and add the below code for defining the ng-app in Angular:
  1. var testApp = angular.module('TestApp', []);  
Now create a directive named manuVisible for attribute type directive :
  1. testApp.directive('menuVisible', ['$http', function () {  
  2.     return {  
  3.         restrict: 'A',  
  4.         link: function (scope, element, attr) {  
  5.             var menuVisible = function () {  
  6.                 if (scope.model.element == 'Admin') {  
  7.                     element.css("display", "block");  
  8.                 }  
  9.                 else {  
  10.                     element.css("display", "none");  
  11.                 }  
  12.             }  
  13.   
  14.             scope.$watch('model.element', function (value) {  
  15.                 menuVisible();  
  16.             });  
  17.             menuVisible();  
  18.         }  
  19.     }  
  20. }]);  
Now create another directive named menuClass for class type directives :
  1. testApp.directive('menuClass', ['$http', function () {  
  2.     return {  
  3.         restrict: 'C',  
  4.         link: function (scope, element, attr) {  
  5.             var menuVisible = function () {  
  6.                 if (scope.model.element == 'Admin') {  
  7.                     element.addClass('alert-info');  
  8.                 }  
  9.                 else {  
  10.                     element.removeClass('alert-info');  
  11.                 }  
  12.             }  
  13.   
  14.             scope.$watch('model.element', function (value) {  
  15.                 menuVisible();  
  16.             });  
  17.             menuVisible();  
  18.         }  
  19.     }  
  20. }]);  
Now add a HTML file  and add the below code :
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>Directive Types</title>  
  5.     <link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />  
  6.     <script src="../../Scripts/angular.min.js"></script>  
  7.     <script src="SampleDirective.js"></script>  
  8.     <script src="IndexController.js"></script>  
  9.   
  10. </head>  
  11. <body data-ng-app="TestApp" data-ng-controller="IndexController as model">  
  12.     <div class="row animated fadeInRight">  
  13.         <div class="col-lg-12">  
  14.             <div class="rowDiv">  
  15.                 <h3>{{model.message}}</h3>  
  16.             </div>  
  17.         </div>  
  18.         <div class="col-lg-12">  
  19.             <div class="rowDiv">  
  20.                 <span> User Type</span>  
  21.                 <select data-ng-model="model.element">  
  22.                     <option>Admin</option>  
  23.                     <option>User</option>  
  24.                 </select>  
  25.             </div>  
  26.         </div>  
  27.           
  28.         <div class="col-lg-12">  
  29.             <h2>Menu List</h2>  
  30.             <div class="rowDiv">  
  31.                 <ul>  
  32.                     <li>Home</li>  
  33.                     <li>Customer List</li>  
  34.                     <li>Product List</li>  
  35.                     <li>Booking List</li>  
  36.                     <li>Delivery List</li>  
  37.                 </ul>  
  38.             </div>  
  39.         </div>  
  40.         <div class="col-lg-12">  
  41.             <h2>Menu List with Element</h2>  
  42.             <div class="rowDiv">  
  43.                 <ul>  
  44.                     <li>Home</li>  
  45.                     <li menu-visible>Customer List</li>  
  46.                     <li menu-visible>Product List</li>  
  47.                     <li menu-visible>Booking List</li>  
  48.                     <li menu-visible>Delivery List</li>  
  49.                 </ul>  
  50.             </div>  
  51.         </div>  
  52.         <div class="col-lg-12">  
  53.             <h2>Menu List with Class</h2>  
  54.             <div class="rowDiv">  
  55.                 <ul>  
  56.                     <li class="active">Home</li>  
  57.                     <li class="active">Customer List</li>  
  58.                     <li class="active menu-class">Product List</li>  
  59.                     <li class="active">Booking List</li>  
  60.                     <li class="active">Delivery List</li>  
  61.                 </ul>  
  62.             </div>  
  63.         </div>  
  64.     </div>  
  65. </body>  
  66. </html>  
Now, add a Javascript file and add the below code  for controller file,
  1. var userType = 'user';  
  2.   
  3. testApp.controller('IndexController', ['$http', function ($http, urlService) {  
  4.     var self = this;  
  5.   
  6.     self.message = 'Directive Type -- Element';  
  7.     self.element = 'Admin';  
  8.     self.setUser = function () {  
  9.         getUserType = self.element;  
  10.     }  
  11.   
  12.       
  13. }]);  
Now run the file and output will be shown as below :
 
Now in the above picture, we can see that one line item is marked by a different background color which is done by the class type directives.
In the top of the page, there is user type. If we select user in spite of admin, then except for home line item, other items' visibility is hidden, which is basically done by attribute-based directives.
 


Similar Articles