Let me discuss about Custom Directives in Angular JS.
Custom directives are used in Angular JS to extend the functionality of HTML.
They are defined using directive function. A custom directive simply replaces the element for which it is activated. During bootstrap, the Angular JS application finds matching elements and does one time activity using its compile() method of the custom directive. Then it processes the element using link() method of the custom directive based on the scope of the directive. Angular JS provides support to create custom directives for the following elements:
- Element directive - This activates when a matching element is encountered.
- Attribute - This activates when a matching attribute is encountered.
- CSS - This activates when a matching CSS style is encountered.
- Comment - This activates when a matching comment is encountered.
Let me elaborate further with a suitable example:-
index.html:-
<html>
<head>
<title>Angular JS Custom Directives</title>
</head>
<body>
<h2>AngularJS Custom Directives</h2>
<div ng-app="mainApp" ng-controller="EmployeeController">
<employee name="Mahesh"></employee><br/>
<employee name="Piyush"></employee>
</div>
<script src="angular.min.js"></script>
<script src="app.js"></script>
<script src="directive.js"></script>
<script src="controller.js"></script>
</body>
</html>
app.js:-
var mainApp = angular.module("mainApp", []);
directive.js:-
mainApp.directive('employee', function() {
var directive = {};
directive.restrict = 'E';
directive.template = "Employee: <b>{{employee.name}}</b> , ID: <b>{{employee.id}}</b>";
directive.scope = {
employee : "=name"
}
directive.compile = function(element, attributes) {
element.css("border", "1px solid #cccccc");
var linkFunction = function($scope, element, attributes) {
element.html("Employee: <b>"+$scope.employee.name +"</b> , ID: <b>"+$scope.employee.id+"</b><br/>");
element.css("background-color", "lightblue");
}
return linkFunction;
}
return directive;
});
controller.js:-
mainApp.controller('EmployeeController', function($scope) {
$scope.Mahesh = {};
$scope.Mahesh.name = "Mahesh Parashar";
$scope.Mahesh.id = "E001";
$scope.Piyush = {};
$scope.Piyush.name = "Piyush Parashar";
$scope.Piyush.id = "E002";
});
Screenshots:-
Screenshots:-
Explanation:-
Here, in the above application, "employee" custom HTML tags are defined. This directive will be activated as soon as any "employee" element is encountered in html "restrict = E", signifies that directive is Element directive. The template - "directive.template" replaces the complete element with its text. The scope is used to distinguish each employee element based on criteria. The compile - "directive.compile" is called during application initialization. Angular JS calls it once when html page is loaded. The "linkFunction" used here, is linked with each element with scope to get the element specific data. The controller is defined to update the scope for directive. Here, I use the value of name attribute as scope's child.
No comments:
Post a Comment