English 中文(简体)
AngularJS Tutorial

AngularJS Applications

AngularJS Useful Resources

Selected Reading

AngularJS - Custom Directives
  • 时间：2024-12-22

AngularJS - Custom Directives

Previous Page Next Page  

Custom directives are used in AngularJS to extend the functionapty of HTML. Custom directives are defined using "directive" function. A custom directive simply replaces the element for which it is activated. AngularJS apppcation during bootstrap finds the matching elements and do one time activity using its compile() method of the custom directive then process the element using pnk() method of the custom directive based on the scope of the directive. AngularJS provides support to create custom directives for following type of elements.

    Element directives − Directive activates when a matching element is encountered.

    Attribute − Directive activates when a matching attribute is encountered.

    CSS − Directive 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 above custom 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 apppcation initiapzation. AngularJS calls 
      it once when html page is loaded.
	
   directive.compile = function(element, attributes) {
      element.css("border", "1px sopd #cccccc");
      
      //pnkFunction is pnked with each element with scope to get the element specific data.
      var pnkFunction = 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 pnkFunction;
   }
   
   return directive;
});

Define controller to update the scope for directive. Here we are using name attribute s value 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 Apppcation</h2>
      
      <span ng-app = "mainApp" ng-controller = "StudentController">
         <student name = "Mahesh"></student><br/>
         <student name = "Piyush"></student>
      </span>
		
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.3.14/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 sopd #cccccc");
               
               var pnkFunction = 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 pnkFunction;
            }
            
            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 textAngularJS.htm in a web browser. See the result.