Angular JS

champak
₹2,000.00 ₹300.00
  • 11 students
  • 10 lessons
  • 0 quizzes
  • 10 week duration

Angular JS

Custom Directives in Angular JS

AngularJS provides options for creating your own directives.

New directives are created by using the .directive function.

Like a controller, first we need to register a custom directive on module in order to configure and use it.

For this use .directory() method and connect it to module by a dot(.) operator, i.e chain rule.

Here, directive() method contains two argument in which first argument, i.e bookDetails, is the name of the custom directive that you want to create and second argument is a factory function.

The factory function returns an object having different options which tell the behaviour of the directive, i.e how the directive should behave when matched. This function is invoked only once when the compiler finds and matches the directive for the first time.

To use the new directive you create an element with the same name as the directive name.

While naming a directive, you must use a camel case name, bookDetails, but when using it it, you must use – separated name, book-details.

In the next example we shall create a directive called d=bookDetails and use it


<!DOCTYPE html>
<html>
<head>
<title>Custom Directives</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app="bookApp">

<h1>Using Tag</h1>
<book-details></book-details>
<h1>Using Attributes</h1>
<p book-details></p>

<script>
var app = angular.module("bookApp", []);
app.directive("bookDetails", function() {
return {

template : "<h3>Book Name : The Recursion Sutras</h3>"
};
});
</script>

</body>
</html>

To use the directive through a class we need to add restrict:”C” to the directive.


<!DOCTYPE html>
<html>
<head>
<title>Custom Directives</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app="bookApp">

<h1>Using Class</h1>
<div class="book-details"></div>

<script>
var app = angular.module("bookApp", []);
app.directive("bookDetails", function() {
return {
restrict: "C",
replace: true,
template : "<h3>Book Name : The Recursion Sutras</h3>"
};
});
</script>

</body>
</html>

 

The directives can be used vi comment as well. In this case we use restrict:”M” and replace true.


<!DOCTYPE html>
<html>
<head>
<title>Custom Directives</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app="bookApp">
<h1>Using Comments</h1>
<!-- directive: book-details -->

<script>
var app = angular.module("bookApp", []);
app.directive("bookDetails", function() {
return {
restrict: "M",
replace: true,
template : "<h3>Book Name : The Recursion Sutras</h3>"
};
});
</script>

</body>
</html>

These are the possible values for restrict.

A : Specifies that Directive will be used as an attribute, like <div item-widget></div>.This is also the default behavior
E : Specifies that Directive will be used as an Element. Like <item-widget></item-widget>. Preferred if creating new content.
C : Specifies that Directive can be used as class name in existing HTML elements. Like <div class=”item-widget”></div>
M : Specifies that Directive can be used as HTML comments. Like <!– Using directive: item-widget–>

The restrict can be combined.


<!DOCTYPE html>
<html>
<head>
<title>Custom Directives</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app="bookApp">

<h1>Using Elements</h1>
<book-details></book-details>
<h1>Using Attributes</h1>
<p book-details></p>
<h1>Using Class</h1>
<div class="book-details"></div>
<h1>Using Comments</h1>
<!-- directive: book-details -->

<script>
var app = angular.module("bookApp", []);
app.directive("bookDetails", function() {
return {
restrict: "EACM",
replace: true,
template : "<h3>Book Name : The Recursion Sutras</h3>"
};
});
</script>

</body>
</html>

replace : true will replace the original tag.

And finally we have an example that uses variables.


<!DOCTYPE html>
<html>
<head>
<title>Custom Directives</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app="bookApp">

<h1>Using Elements</h1>
<div ng-model="bookName" ng-controller="book">
<input type="text" ng-model="bookName"/>
<h1>{{bookName}}</h1>

</div>

<script>
var app = angular.module("bookApp", []);
app.directive("bookDetails", function() {
return {

template : "<h3>Book Name : {{bookName}}</h3>"
};
});
app.controller('book', function($scope) {

$scope.bookName= "The Recursion Sutras";


});
</script>

</body>
</html>

 

2 thoughts on “Custom Directives in Angular JS

    1. “These are the possible values for restrict.

      A : Specifies that Directive will be used as an attribute, like

      .This is also the default behavior
      E : Specifies that Directive will be used as an Element. Like . Preferred if creating new content.
      C : Specifies that Directive can be used as class name in existing HTML elements. Like

      M : Specifies that Directive can be used as HTML comments. Like

      Its there in the post.

Leave a Reply

Your email address will not be published. Required fields are marked *