bing
Flat 10% & upto 50% off + Free additional Courses. Hurry up!

AngularJS Custom Directives

 

AngularJS enables to create new directives that you can encapsulate and simplify DOM manipulation. These directives are used to extend the functionality of HTML. You can create directives that change or even create totally new behavior in HTML. It replaces the element for which it is activated. These are defined using directive function.

In AngularJS, there are four various ways to implement custom directives:

1. Element directives

It is activated when find a matching HTML element in the HTML template.

<my-directive></my-directive>

2. Attribute directives

It is activated when finds a matching HTML attribute in the template.

<div my-directive></div>

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

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

4. Comment directives

It is enabled when finds a matching HTML comment.

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

 

Some of commonly used properties are:

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

AngularJS Custom Directives

Employee: abc , Id: 1

Employee: xyz , Id: 2

"0 Responses on AngularJS Custom Directives"

Training in Cities

Bangalore, Hyderabad, Chennai, Delhi, Kolkata, UK, London, Chicago, San Francisco, Dallas, Washington, New York, Orlando, Boston

100% Secure Payments. All major credit & debit cards accepted Or Pay by Paypal.

top

Sales Offer

  • To avail this offer, enroll before 10th December 2016.
  • This offer cannot be combined with any other offer.
  • This offer is valid on selected courses only.
  • Please use coupon codes mentioned below to avail the offer
offer-june

Sign Up or Login to view the Free AngularJS Custom Directives.