Juice of Angular Directive And Reusability

Juice of  Angular Directive And  Reusability

Angular Juice of Reusability 

written by: Balaji Senthilnathan <balaji.s@mitosistech.com>
Prathusha Mahesh <prathusha.m@mitosistech.com>

Description

AngularJS directives are used to extend HTML.Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children.

Directive representaion

We can notate directive with hyphen separated at camelcase

eg. for example ngApp as ng-app

Why directive needed ?

  • Directive in AngularJS ensures the reusablity feature as a component form .
  • Directives in AngularJS encapsulate all the behavioral properties and functionalities of an element in a semantic way, thereby keeping all of the functionality grouped together.

Types of Directives:

  •  Built-in Directives
  •  Custom Directives

Built-in Directives:

System defined directive are called build-in Directives

Some of them are ng-app, ng-init, ng-model, ng-repeat, ng-bind, ng-if etc.

ng-app directive initializes an AngularJS application,we will give name of the module
eg:ng-app=””

ng-init directive initializes application data
eg:ng-init=”a=1;b=2″

ng-model directive is used for binding value
eg:ng-model=”a”

ng-repeat directive used on an array of objects

Custom Directives:

Likewise in-built directives we can create our own directive by defining the functionality as we like.

By using directive function we can create custom directives. AngularJS provides support to create custom directives for following type of elements by adding restrict property

restrict :”A”/”E”/”C”/”M”

  • A-directive can be used as attribute
  • E-directive can be used as element
  • C-directive can be used as class
  • M-directive can be used as comment

scope:

Scope object is used for accessing the variables and functions defined in the AngularJS controllers, and the controller and link functions of the directive. By default, directives do not create their own scope; instead they use the scope of their parent, generally a controller (within the scope of which the directive is defined).
Scope is a property of the directive, just like restrict, template, etc.

The following are the different scopes used in directive

  • @ – is used for passing value to the directive scope
  • = – variables are passed instead of the values
  • & – is used for passing functions

link:

Link function defines directive’s API & functions that can then be used by directive to preform some business logic.Link function gets executed for each instance of directive so that each instance get’s it’s own business-logic without affecting others. If we need to add functionality to our instance of the directive, we can add it to the scope of the element we’re working with. AngularJS passes several arguments to the link function.

 

The compile Function:

The compile function is used to perform any DOM transformation before the link function runs. It accepts the

following arguments.

• tElement – The element on which the directive is applied.

• attrs – The normalized list of attributes declared on the element.

Example:

<html> 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/ angular.min.js"></script> 
 <body ng-app="myApp">
<my-directive a-value="10" b-value="10"></my-directive>
<script> 
 var app = angular.module("myApp", []);
app.directive("myDirective", function() { 
 return { 
 restrict : "E", 
 template : "<h1>{{add()}}</h1>", 
 scope:{ 
 aValue:"=", 
 bValue:"=" 
 }, 
 link:function($scope){ 

 $scope.add=function(){ 
 $scope.sum=parseInt($scope.aValue)+parseInt($scope.bValue); 
 return $scope.sum; 
 } 
 } 

 } 
 }); 
 </script>
</body> 
</html>

 

In the above example, we are passing values of a and b as 10 and 10. It executes function written in link and returns output as 20.


Recommended Posts