AngularJs directives controls the rendering of HTML markup inside the AngularJs application. AngularJs lets us to extends the HTML attributes to new AngularJs Attributes. In the previous tutorials We have learn about what are AngularJs directives, now it is the time to, how to create AngularJs custom directive ?
AngularJs custom directive :
AngularJs custom directive (s) are used to extend the the functionality of HTML.
We can create the AngularJs custom directive by taking the help of AngularJs module object.
The custom directories are created by using directive() method provided by model object.
A custom directive simply replaces the element on which it applied.
During the initialization time itself AngularJs executes the custom directives.
Syntax :
<div ng-controller=”myCtrl”>
<div name-of-drective></div>
</div>
myApp.directive(‘nameOfDirective’, function() {
var obj = {};
return obj;
})
Points to Note :
- While naming directive, the name of the directive should be in camelCase (nameOfDirective)
- While using the directive, it should be invoke by placing “-” in it. For instance it should be name-of-directive
- We can restrict the our custom directive to invoke some methods only. To restrict a custom directive we can use restrict attribute. The possible values are “E” : Element, “A” : Attribute, “C” : Class and “M” : Comment.
- Default restrict value is “EA”, that means the created custom directive is accessible to elements and attributes.
Types of Angular Custom Directive :
The type of a custom directive is specified, how the directive is used. We can create a custom directive for an element, attribute and for a class.
For Element :
<welcome-directive/>
Example :
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJs Services Example</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.directive(‘welcomeDirective’, function() {
var obj = {};
obj.restrict = ‘E’;
obj.template = ‘<h2>Welcome {{sname}} : This is Custom Element Directive</h2>’;
return obj;
})
myApp.controller("myCtrl", function($scope) {
$scope.sname = "Chandra Shekhar G";
})
</script>
</head>
<body ng-app="myApp">
<h1>AngularJs Custom Directives Demo</h1>
<hr>
<div ng-controller="myCtrl">
<welcome-directive/>
</div>
</body>
</html>
[/html]
On the above example, we have applied restriction “E”, means it can be called by element level only. For template attribute we can give .html file also.
Output :
[advanced_iframe securitykey=”85899c43cd5d45b9ec5729b5189d1961d89f90d9″ src=”http://nhk.e6a.mytemp.website/AngularJsExamples/AngularJS_CustomDirective_Element.html”]
For Attribute :
<div welcome-directive></div>
Example:
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJs Services Example</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.directive(‘welcomeDirective’, function() {
var obj = {};
obj.restrict = ‘A’;
obj.template = ‘<h2>Welcome {{sname}} : This is Custom Directive</h2>’;
return obj;
})
myApp.controller("myCtrl", function($scope) {
$scope.sname = "Chandra Shekhar G";
})
</script>
</head>
<body ng-app="myApp">
<h1>AngularJs Custom Directives Demo</h1>
<hr>
<div ng-controller="myCtrl">
<div welcome-directive></div>
</div>
</body>
</html>
[/html]
On the above example, we have applied restriction “A”, means it can be called by attribute level only. For template attribute we can give .html file also.
Output :
[advanced_iframe securitykey=”85899c43cd5d45b9ec5729b5189d1961d89f90d9″ src=”http://nhk.e6a.mytemp.website/AngularJsExamples/AngularJs_CustomDirective_Attribute.html”]
For Class :
<div class="my-customcss"></div>
Example:
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJs Services Example</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
h2 {
background-color: green;
}
</style>
<script>
var myApp = angular.module("myApp", []);
myApp
.directive(
‘myCustomcss’,
function() {
var obj = {};
obj.restrict = ‘C’;
obj.template = ‘<h2>Welcome {{sname}} : This is Custom Element Directive</h2>’;
return obj;
})
myApp.controller("myCtrl", function($scope) {
$scope.sname = "Chandra Shekhar G";
})
</script>
</head>
<body ng-app="myApp">
<h1>AngularJs Custom Directives Demo</h1>
<hr>
<div ng-controller="myCtrl">
<div class="my-customcss"></div>
</div>
</body>
</html>
[/html]
Output :
[advanced_iframe securitykey=”85899c43cd5d45b9ec5729b5189d1961d89f90d9″ src=”http://nhk.e6a.mytemp.website/AngularJsExamples/AngularJS_CustomDirective_Class.html”]
On the above example, we have applied restriction “C”, means it can be called by class level only. For template attribute we can give .html file also.
Happy Learning 🙂
