AngularJS Custom Directives: The AngularJS allows creating custom directives that make it easy for DOM manipulation. The HTML functionality is extended by these directives and also allows to create new directives to manipulate HTML behavior.
AngularJS Custom Directives
Element Directives
<my-directive></my-directive>
The above code gets activated when the matching HTML elements found in the HTML template.
Attribute Directives
<div my-directive></div>
It gets activated when it finds a matching HTML attribute in the HTML template.
CSS Class Directives
<div class=”my-directive: expression;”></div>
It will get activated with the matching CSS class.
Comment Directives
<!-- Directive : my-directive expression; -->
When there is a matching HTML comment it will be enabled.
Custom Directive Commonly used Properties
restrict
The restrict defines how the directive can be implemented in the angular js app. The 4 restrict options are as follows:
| restrict Type | Description | Syntax |
|---|---|---|
| restrict ‘A’ | For Attribute which is default | <div my-directive></div> |
| restrict ‘C’ | For Class | <div class=”my-directive: expression;”></div> |
| restrict ‘E’ | For Element | <my-directive></my-directive> |
| restrict ‘M’ | For Comment | <!– Directive : my-directive expression; –> |
NOTE: Multiple restrict can also be used as restrict ‘EC’.
Scope
The scopes are used to access the data or methods which are specified inside the template and link function. Default the directives don’t provide their own space without explicitly set.
Types of scopes
- Scope:true- To get new scope.
- Scope: false- To use its parent scope.
- Scope:{}- to get a new scope that doesn’t inherit from parent and exists on its own.
Template
A template is used to specify the HTML content that generates when a directive has complied.
templateUrl
The templateUrl is used to define the path of the template used by directives.
templateUrl Example
details.directive('intellipaat', function () {
return {
restrict: 'E',
scope: false,
templateUrl: 'intellipaat'.tpl.html'
}
});
AngularJS Custom Directive Example
<html>
<head>
<title>Angular JS Custom Directives</title>
</head>
<body>
<h1>AngularJS Custom Directives </h1>
<div ng-app = "detailsApp" ng-controller = "employeeController">
<employee name = "Mahesh"></employee><br/>
<employee name = "Piyush"></employee>
</div>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var detailsApp= angular.module("detailsApp", []);
detailsApp.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", "#ffffff");
}
return linkFunction;
}
return directive;
});
detailsApp.controller('employeeController', function($scope) {
$scope.Mahesh = {};
$scope.Mahesh.name = "abc";
$scope.Mahesh.id = 1;
$scope.Piyush = {};
$scope.Piyush.name = "xyz";
$scope.Piyush.id = 2;
});
</script>
</body>
</html>
AngularJS Custom Directive Example Output
AngularJS Custom Directives
Employee: abc, Id: 1
Employee: xyz, Id: 2