In AngularJS, while creating a custom directive, we can have different kinds of restrictions depending on how we are going use that directive.
The different kinds of Restrictions are:
1. A - Attribute (Note : A is the Default Restriction)
2. C - Class
3. E - Element
4. M - Comment
Example:
1. A- Attribute :
If you want to use your directive as attribute of any element then you have to write the restriction as 'A'.
Javascript:
Html :
Note: We are using our directive as Attribute for "div" element.
2. C - Class :
If you want to use your directive as class then you have to write the restriction as 'E'.
Javascript:
Html :
Note: Here we are using our directive as a class.
3. E - Element :
If you want to use your directive as html element then you have to write the restriction as 'E'.
Javascript:
Html :
Note: Here we are using our directive as element.
4. M - Comment :
If you want to use your directive as comment then you have to write the restriction as 'M'.
Javascript :
Html :
Note: Here you are invoking your directive using a comment(careful with the spaces in comment. If comment is not properly formed, you may not get the result).
These are the different kinds of directives restrictions in AngularJS.
The different kinds of Restrictions are:
1. A - Attribute (Note : A is the Default Restriction)
2. C - Class
3. E - Element
4. M - Comment
Example:
1. A- Attribute :
If you want to use your directive as attribute of any element then you have to write the restriction as 'A'.
Javascript:
var myApp = angular.module('myApp', []);
myApp.directive('myDirective', function () {
return {
restrict: 'A',
link: function () {
alert("A is working..");
}
}
})
Html :
<html ng-app="myApp"> <head> <title>AngularJS Directives</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script> <script src="myAngular.js"></script> </head> <body> <div myDirective></div> </body> </html>
Note: We are using our directive as Attribute for "div" element.
2. C - Class :
If you want to use your directive as class then you have to write the restriction as 'E'.
Javascript:
var myApp = angular.module('myApp', []);
myApp.directive('myDirective', function () {
return {
restrict: 'C',
link: function () {
alert("c is working..");
}
}
})
Html :
<html ng-app="myApp"> <head> <title>AngularJS Directives</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script> <script src="myAngular.js"></script> </head> <body> <div class="myDirective"></div> </body> </html>
Note: Here we are using our directive as a class.
3. E - Element :
If you want to use your directive as html element then you have to write the restriction as 'E'.
Javascript:
var myApp = angular.module('myApp', []);
myApp.directive('myDirective', function () {
return {
restrict: 'E',
template:'<div>This text is from custom directive..</div>'
}
})
Html :
<html ng-app="myApp"> <head> <title>AngularJS Directives</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script> <script src="myAngular.js"></script> </head> <body> <myDirective></myDirective> </body> </html>
Note: Here we are using our directive as element.
4. M - Comment :
If you want to use your directive as comment then you have to write the restriction as 'M'.
Javascript :
var myApp = angular.module('myApp', []);
myApp.directive('myDirective', function () {
return {
restrict: 'M',
link: function () {
alert('M is working..');
}
}
})
Html :
<html ng-app="myApp"> <head> <title>AngularJS Directives</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script> <script src="myAngular.js"></script> </head> <body> <!-- directive:myDirective --> <div></div></body> </html>
Note: Here you are invoking your directive using a comment(careful with the spaces in comment. If comment is not properly formed, you may not get the result).
These are the different kinds of directives restrictions in AngularJS.
For more posts on angularJS refer: AngularJS
Thank you for sharing this information and Very good looking blog on
ReplyDeleteHire Angular Developers