Microsoft Dot Net Master: AngularJS

Monday, March 9, 2015

AngularJS - Custom Directives

Custom directives are used in AngularJS to extend the functionality of HTML. They are defined using directive function. A custom directive simply replaces the element for which it is activated. During bootstrap, the AngularJS application finds matching elements and does one-time activity using its compile() method of the custom directive. Then it processes the element using link() method of the custom directive based on the scope of the directive. AngularJS provides support to create custom directives for the following elements:

Element directive - This activates when a matching element is encountered.
Attribute - This activates when a matching attribute is encountered.
CSS - This activates when a matching CSS style is encountered.
Comment - Directive activates when a matching comment is encountered.

Understanding Custom Directive

Define custom HTML tags.

<student name="Mahesh"></student><br/>
<student name="Piyush"></student>

Define custom directive to handle the above HTML tags.

var mainApp = angular.module("mainApp", []);

//Create a directive, first parameter is the html element to be attached.   
//We are attaching student html tag. 
//This directive will be activated as soon as any student element is encountered in html
mainApp.directive('student', function() {
   //define the directive object
   var directive = {};
   //restrict = E, signifies that directive is Element directive
   directive.restrict = 'E';
   //template replaces the complete element with its text. 
   directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";
   //scope is used to distinguish each student element based on criteria.
   directive.scope = {
       student : "=name"
   }
   //compile is called during application initialization. AngularJS calls it once when html page is loaded.
   directive.compile = function(element, attributes) {
      element.css("border", "1px solid #cccccc");
   //linkFunction is linked with each element with scope to get the element specific data.
      var linkFunction = function($scope, element, attributes) {
          element.html("Student: <b>"+$scope.student.name +"</b> , Roll No: <b>"+$scope.student.rollno+"</b><br/>");
          element.css("background-color", "#ff00ff");
      }
      return linkFunction;
   }
   return directive;
});

Define controller to update the scope for directive. Here, we use the value of name attribute as scope's child.

mainApp.controller('StudentController', function($scope) {
      $scope.Mahesh = {};
      $scope.Mahesh.name = "Mahesh Parashar";
      $scope.Mahesh.rollno  = 1;

      $scope.Piyush = {};
      $scope.Piyush.name = "Piyush Parashar";
      $scope.Piyush.rollno  = 2;
});

Example

<html>
<head>
   <title>Angular JS Custom Directives</title>
</head>
<body>
   <h2>AngularJS Sample Application</h2>
   <div ng-app="mainApp" ng-controller="StudentController">
  <student name="Mahesh"></student><br/>
  <student name="Piyush"></student>
   </div>
   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
   <script>
      var mainApp = angular.module("mainApp", []);
   
      mainApp.directive('student', function() {
         var directive = {};
         directive.restrict = 'E';
         directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";
         
         directive.scope = {
            student : "=name"
         }
   
         directive.compile = function(element, attributes) {
            element.css("border", "1px solid #cccccc");

            var linkFunction = function($scope, element, attributes) {
               element.html("Student: <b>"+$scope.student.name +"</b> , Roll No: <b>"+$scope.student.rollno+"</b><br/>");
               element.css("background-color", "#ff00ff");
            }

            return linkFunction;
         }

         return directive;
      });
   
      mainApp.controller('StudentController', function($scope) {
            $scope.Mahesh = {};
            $scope.Mahesh.name = "Mahesh Parashar";
            $scope.Mahesh.rollno  = 1;

            $scope.Piyush = {};
            $scope.Piyush.name = "Piyush Parashar";
            $scope.Piyush.rollno  = 2;
      });
      
   </script>
</body>
</html>

Output

Open testAngularJS.htm in a web browser and see the result.