You can create your own directives by below steps.
-
directives are created by using the .directive function
-
directives name must use a camel case name like weAsnwer and in HTML must use – separated name like we-answer
Example: 1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" > <we-answer></weAnswer> </div> <script> var app = angular.module("myApp", []); app.directive("weAnswer", function() { return { template : "<h1>We.....Answer</h1>" }; }); </script> </body> </html> |
Example: 2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" > <div we-answer></div> </div> <script> var app = angular.module("myApp", []); app.directive("weAnswer", function() { return { restrict : "A", template : "<h1>We.....Answer</h1>" }; }); </script> </body> </html> |
-
E for the Element name
-
A for Attribute
-
C for Class
-
M for Comment
- You can load another sub view & replace content replace: true
Example: 3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <body> <div ng-app="myApp" > <we-answer></we-answer> </div> <script> var app = angular.module("myApp", []); app.directive("weAnswer", function() { return { replace:true, restrict : "E", templateUrl: 'subview.html' }; }); </script> </body> </html> |
More Stories
AngularJS Dynamic Routes
Angular Demo Project
AngularJS Routes