top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration

Facebook Login
Site Registration

How can we create a custom directive in Angular?

+2 votes
How can we create a custom directive in Angular?
posted May 4, 2015 by Khusboo

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes

Custom directives

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.

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", []);
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>{{}}</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>"+$ +"</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 = {};
   $ = "Mahesh Parashar";
   $scope.Mahesh.rollno  = 1;

   $scope.Piyush = {};
   $ = "Piyush Parashar";
   $scope.Piyush.rollno  = 2;
answer Jan 25, 2017 by Arun Angadi
Contact Us
+91 9880187415
#280, 3rd floor, 5th Main
6th Sector, HSR Layout
Karnataka INDIA.