AngularJS - SPLessons

AngularJS Custom Directives

Chapter 25

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

AngularJS Custom Directives

AngularJS Custom Directives

shape Description

To extend the HTML DOM elements functionality, AngularJS custom directives are used. These are characterized using the “directive” function. The rendition of HTML in an AngularJS application is controlled by AngularJS directives. This phenomena is popularly known as “teaching HTML new tricks”. Here is an example of AngularJS Custom Directives:

<customer name="Smith"></customer><br/>
<mobile name="Samsung"></mobile>

Interpolation directive {{ }}, ng-if directive and the ng-repeat directive are some of the examples of directives. For which custom directive is activated it replaces the element. While bootstrapping, AngularJS application searches for the matching elements and complies using compile() method of the custom directive and then uses link() method to process the element. The chapter explains when to create custom directives and how to execute them.

Directive Types

shape Description

Following directives can be implemented:

  • Attribute directives
  • Element directives
  • Comment directives
  • CSS class directives

From the above mentioned list, element and attribute directives are the most commonly used AngularJS Custom Directives and the other two are used only upon request.

shape Directives

Directive Type Description
Element directive At the point when AngularJS finds a coordinating HTML element in the HTML template, Element directive is enacted.
Attribute directive Attribute directive gets enacted when AngularJS finds a coordinating HTML element attribute.
CSS class directive CSS class directive gets enacted when AngularJS finds a coordinating CSS Class.
Comment directive This directive gets enacted when AngularJS finds a coordinating HTML comment.

A Basic Directive

shape Examples

This example shows how to register a directive with a module.


myapp = angular.module("spApp", []);
myapp.directive('customer', function() {
 var directive = {};
   directive.restrict = 'E'; /* restrict this directive to elements */
   directive.template = "Name: {{Smith}}";
   return directive;
});

Register a new directive by calling directive() function. The initial parameter of the function call to the directive() is the directive name to register. This is the name which is needed to use in HTML templates whenever there is a need to activate that directive.

In the above example, customer is used as a name i.e. this directive is activated as an HTML element with name customer in the HTML template.

The factory function is the second parameter of the directive function passed. A directive definition has to be returned by this function whenever requested. To get a JavaScript object that contains the definition of the directive, AngularJS will request this function.

In the above example, a JavaScript object is used inside the function .

Restrict and Template properties

shape Description

Factory function returned by JavaScript object has two properties: A field template and restrict field.

Restrict

The restrict field helps in checking whether the directive has to be activated by matching HTML element or by an element attribute.

  • Setting restrict to E It tells only HTML elements which are named as customer must activate the directive.
  • Setting restrict to A It tells only HTML attributes which are named as customer must activate the directive.
  • Value of AE can also be used to match both HTML element names and attribute names.

Template

A HTML template that replaces the matched customer element content is a template field. It works when the matched customer element content is not found and instead, this HTML template was located in the similar place.

shape Examples

Assume that below HTML page has this HTML:

<div ng-controller="SPController" >
	<customer>This div will be replaced</customer>	 	 
</div>	 	 

At the moment when AngularJS finds the inner div element, the activation of added directive will take place. In place of the div element, the HTML will be inserted:


Name: Smith

compile() and link() Functions

shape Description

  • The compile() and link() functions help in performing advanced operation inside the directive created.
  • The compile() and link() functions characterizes the way of modification if directive in the HTML document matches the directive.
  • The compile() function is called once for each occurrence of the directive in the HTML page. The compile() function can then do any one-time configuration required by the element containing the directive.
  • The compile() function completes its task by returning the link() function. In this process, link() is called each time whenever the element has to bound to data in the $scope object.
  • As discussed, compile() function can be summed up with the directive definition object, and link() function is returned by the compile() function when executed.

Here is an example of AngularJS custom directive,

index.html

<html>

  <head>
    <title>Angular JS Custom Directives</title>
    <script data-require="angular.js@1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="App.js"></script>
    <script src="Controller.js"></script>
  </head>

  <body>
    <h2>Angular Custom Directive</h2>
    <div ng-app="spApp" ng-controller="SPController">
      <customer name="smith"></customer>
      <br />
      <customer name="jack"></customer>
    </div>
  </body>

</html>

App.js

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

App.js

spApp.directive('customer', function() {
  var directive = {};
  directive.restrict = 'E';
  directive.template = "Customer: <b>{{customer.name}}</b> , Id Num: <b>{{customer.id}}</b>";

  directive.scope = {
    customer: "=name"
  }

  directive.compile = function(element, attributes) {
    element.css("border", "1px solid #cccccc");

    var linkFunction = function($scope, element, attributes) {
      element.html("Customer: <b>" + $scope.customer.name + "</b> , Id Num: <b>" + $scope.customer.id + "</b><br/>");
      element.css("background-color", "#00FFFF");
    }

    return linkFunction;
  }

  return directive;
});

spApp.controller('SPController', function($scope) {
  $scope.smith = {};
  $scope.smith.name = "Smith";
  $scope.smith.id = 65;

  $scope.jack = {};
  $scope.jack.name = "Jack";
  $scope.jack.id = 32;
});

Output:

Summary

shape Key Points

  • AngularJS application searches for matching elements and complies using compile() method of the custom directive and then uses link() method to process the element.
  • The restrict field helps in checking whether the directive has to be activated by matching HTML element or by an element attribute.
  • A HTML template that replaces the matched element content is a template field.