Title
Angular JS Custom Directory – Part 1
Introduction
AngularJS directives are what controls the rendering of the HTML inside an AngularJS application. Examples of directives are the interpolation directive ({{ }}), the ng-repeat directive and ng-if directive.
It is possible to implement your own directives too. This is what AngularJS refers to as “teaching HTML new tricks”. This text will show you how to do that.
Directive Types
You can implement the following types of directives:
- Element directives
- Attribute directives
- CSS class directives
- Comment directives
Of these, AngularJS recommends that you try to use element and attribute directives, and leave the CSS class and comment directives (unless absolutely necessary).
The type of a directive determines how the directive is activated. An element directive is activated when AngularJS finds a matching HTML element in the HTML template. An attribute directive is activated when AngularJS finds a matching HTML element attribute. A CSS class directive is activated when AngularJS finds a matching CSS Class. And, a comment directive is activated when AngularJS finds a matching HTML comment.
A basic directive
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp"> <head> <title>Angular JS Custom Directive: Element</title> <script src="../mianAngularJS/angular.min.js"></script> <script src="customDirective.js"></script> </head> <body> <div ng-controller="namescontroller"> <full:name>This will be replaced</full:name> </div> <my-first-directive>This will be replaced</my-first-directive> <br /> <my:first:directive>This will be replaced</my:first:directive> <br /> <my_first_directive>This will be replaced</my_first_directive> </body> </html>
myApp module
var myApp = angular.module('myApp', []);
myApp.controller('namescontroller', function ($scope) {
$scope.name = {
first_name: "Paras",
last_name: "Babbar"
}
});
myApp.directive('fullName', function ()
{
return {
template: "Fullname is {{name.first_name + ' ' + name.last_name}}",
restrict: "E"
}
});
myApp.directive('myFirstDirective', function()
{
return{
template:"<b>Hello World</b>",
restrict:"E"
}
});
Now in order to create custom directive we will use directive method
myApp.directive(); it takes two parameters one is the directive name and other is the function. Keep in mind that directive method always returns a JavaScript object, and also make sure name must be in camel case (not a rule but a naming convention).
Next parameter is function() and this will return a JavaScript object. Hence custom directory is created.
Now we need to set template of the directive.
template:"<b>Hello World {{5+5}}</b>"
And second parameter is restrict,
restrict:"E"
A custom directive can be used in 4 possible ways in AJS, element, attribute, comment and class, to use it as an element we need to set restrict as E.
Now in HTML page we will use this directive as element since the value of restrict is E.
We can declare element in three ways using -, or :, or _
<my-first-directive>This will be replaced</my-first-directive> <br /> <my:first:directive>This will be replaced</my:first:directive> <br /> <my_first_directive>This will be replaced</my_first_directive>
OUTPUT
Now we will create one more directive which will be using expression binding.
myApp.directive('fullName', function ()
{
return {
template: "Fullname is {{name.first_name + ' ' + name.last_name}}",
restrict: "E"
}
});
And same directive can be used in HTML as,
<div ng-controller="namescontroller"> <full:name>This will be replaced</full:name> </div>
OUTPUT
