How To Create Custom Directive in AngularJs

How To Create Custom Directive in AngularJs

How To Create Custom Directive in AngularJs, directives are used in AngularJS to increase the functionality of HTML. To define Custom directives are “directive” function. A custom directive simply change the element for which it is activated. AngularJS application during bootstrap finds the matching elements and do one time activity using its compile() function of the custom directive then process the element using link() function of the custom directive based on the scope of the directive. AngularJS support to create custom directives for following type of elements.

  • Element directives : Directive activates when a matching html element is encountered.
  • Attribute : Directive activates when a matching html attribute is encountered.
  • CSS : Directive activates when a matching css is encountered.
  • Comment : Directive activates when a matching comment is encountered.

How To Create Custom Directive

Define custom html tags for apply directive html tag like id,class and other.

<user name="Pramod"></user><br/>
<user name="ajay"></user>

Create and Define a directive

 var mainApp = angular.module("mainApp", []);
    
    //Create a directive, first parameter is the html element to be attached.      
    //We are attaching user html tag. 
    //This directive will be activated as soon as any user element is encountered in html
       mainApp.directive('user', function() {
         var directive = {};
         directive.restrict = 'E';
         directive.template = "User: <b>{{user.name}}</b> ,Email: <b>{{user.email}}</b>";
         
         directive.scope = {
            user : "=name"
         }
         
         directive.compile = function(element, attributes) {
            element.css("border", "1px solid green");

            var linkFunction = function($scope, element, attributes) {
               element.html("User: <b>"+$scope.user.name +"</b>&nbsp;&nbsp;&nbsp;   Email: <b>"+$scope.user.email +"</b><br/>");
               element.css("background-color", "#F2F7FC");
               element.css("color", "green");
            }

            return linkFunction;
         }

         return directive;
      });

Define a Controller

  mainApp.controller('UserController', function($scope) {
            $scope.Pramod = {};
            $scope.Pramod.name = "Pramod kumawat";
            $scope.Pramod.email  = 'pramod@gmail.com';
            
            $scope.vijay = {};
            $scope.vijay.name = "vijay kumar";
            $scope.vijay.email  = 'vijay@gmail.com';

            $scope.ajay = {};
            $scope.ajay.name = "ajay kumar";
            $scope.ajay.email  = 'Ajay@gmail.com';
      });

Example A Custom Directive

                     <html>
                <head>
                   <title>AngularJS Custom Directives Example</title>
                </head>
                <body>
                   <h2>AngularJS Custom Directives Example</h2>
                   <div ng-app="mainApp" ng-controller="UserController">
                        <user name="Pramod"></user><br/>
                        <user name="ajay"></user>
                   </div>
                   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
                   <script>
                      var mainApp = angular.module("mainApp", []);
                      
                      mainApp.directive('user', function() {
                         var directive = {};
                         directive.restrict = 'E';
                         directive.template = "User: <b>{{user.name}}</b> ,Email: <b>{{user.email}}</b>";
                         
                         directive.scope = {
                            user : "=name"
                         }
                         
                         directive.compile = function(element, attributes) {
                            element.css("border", "1px solid green");
                
                            var linkFunction = function($scope, element, attributes) {
                               element.html("User: <b>"+$scope.user.name +"</b>&nbsp;&nbsp;&nbsp;   Email: <b>"+$scope.user.email +"</b><br/>");
                               element.css("background-color", "#F2F7FC");
                               element.css("color", "green");
                            }
                
                            return linkFunction;
                         }
                
                         return directive;
                      });
                      
                      mainApp.controller('UserController', function($scope) {
                            $scope.Pramod = {};
                            $scope.Pramod.name = "Pramod kumawat";
                            $scope.Pramod.email  = 'pramod@gmail.com';
                            
                            $scope.vijay = {};
                            $scope.vijay.name = "vijay kumar";
                            $scope.vijay.email  = 'vijay@gmail.com';
                
                            $scope.ajay = {};
                            $scope.ajay.name = "ajay kumar";
                            $scope.ajay.email  = 'Ajay@gmail.com';
                      });
                      
                   </script>
                </body>
                </html>

customdirectiveinangularjsexample

customdirectiveinangularjsexample

 

Share Button

About admin

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Author: pramod kumar kumawat Mob: 9269727062
Free WordPress Themes - Download High-quality Templates