Home > DeveloperSection > Articles > AngularJs Custom Directives

AngularJs Custom Directives


Angular JS Angular JS  Angularjs Directive 
Ratings:
1 Comment(s)
 1053  View(s)
Rate this:

AngularJs Custom Directives

Hi everyone in this article I’m explaining about custom directive in angularjs.

Introduction:

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

v  Element directives - Directive activates when a matching element is encountered.

v  Attribute -  Directive activates when a matching attribute is encountered.

v  CSS -  Directive activates when a matching css style is encountered.

v  Comment -  Directive activates when a matching comment is encountered.

Understanding Custom Directive:

Define Custom html tags.

<student name="Kamlakar"></student><br/>

<student name="Manoj"></student>

Define custom directive to handle above custom html tags.

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;

    });

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 Application</h2>

   <div ng-app="mainApp" ng-controller="StudentController">

                                <student name="Kamlakar"></student><br/>

                                <student name="Manoj"></student>

   </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('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.Kamlakar = {};

           $scope.Kamlakar.name = "Kamlakar Singh";

           $scope.Kamlakar.rollno = 1;

 

           $scope.Manoj = {};

           $scope.Manoj.name = "Manoj Pandey";

           $scope.Manoj.rollno = 2;

       });

 

   </script>

</body>

</html>

 

Output:

Open your html file in a web browser


Thanks!

By Manoj Pandey on   one year ago
Nice article


Don't want to miss updates? Please click the below button!

Follow MindStick