Understanding Custom Directive in AngularJS

AngularJS allows you to create custom directives with which it becomes easier to encapsulate and simplify DOM manipulation in AngularJS. These directives extend the HTML functionality. Also, new directives can be created to manipulate the HTML behavior.
Following are the ways to implement custom directives in AngularJS :
1. Element directives
It is activated when finding a matching HTML element in the HTML template.

<my-directive></my-directive>

2. Attribute directives
It is activated when finding a matching HTML attribute in the template.

<div my-directive></div>

3. CSS Class directives
It is activated when finding a matching CSS Class.

<div class=”my-directive: expression;”></div>

4. Comment directives
It is enabled when finding a matching HTML comment.

<!--  Directive : my-directive expression;  -->

Full Stack Web Development Course Video

Commonly used properties

1. Restrict

It specify how a directive is implemented in angular app. There are 4 restrict options:
restrict : ‘A’ – attribute (default one) | <div my-directive></div>
restrict : ‘C’ – Class | <div class=”my-directive: expression;”></div>
restrict : ‘E’ – element | <my-directive></my-directive>
restrict : ‘M’ – Comment | <!– Directive : my-directive expression; –>
You can also specify multiple restrict like as follows:
restrict : ‘EC’

2. Scope

Scope accesses data or methods inside template and link function. By default the directives do not produce their own scope without explicitly set.
Different types of scopes are able to define which are as follows:

  • scope : true – Get new scope
  • scope : false – Use its parent scope
  • scope : {} – Get new isolated scope that doesn’t inherit from parent and exists on its own

3. Template

It specify the HTML content that will be generated when directive is compiled.

4. TemplateUrl

It  specify the path of template that should be used by directives.

details.directive('intellipaat', function () {
return {
restrict: 'E',
scope: false,
templateUrl: 'intellipaat'.tpl.html'
}
});

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>

Output

Get 100% Hike!

Master Most in Demand Skills Now !

AngularJS Custom Directives

Employee: abc , Id: 1
Employee: xyz , Id: 2

Course Schedule

Name Date Details
Web Development Courses 23 Mar 2024(Sat-Sun) Weekend Batch
View Details
Web Development Courses 30 Mar 2024(Sat-Sun) Weekend Batch
View Details
Web Development Courses 06 Apr 2024(Sat-Sun) Weekend Batch
View Details

Find Best AngularJS Training in Other Regions

Bangalore Hyderabad Chennai Mumbai