Html Attribute Custom Directive

 

In this example, We are using Html Attribute type directive for showing page header. We have a directive with name pageHeader. In this directive we are using “restrict: 'A',” which mean this is an Html attribute type directive. We can use this element anywhere on html elements as Html attribute. Example: < div page-header> See below example:

 
 
 
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body ng-app="Example" class="container"> <div page-header></div> </body> </html> <script> angular.module('Example', []) .directive("pageHeader", function () { return { restrict: 'A', template: '<div class="jumbotron container"><h3>Example 2:</h3><span>This is attribute type of directive</span></div>' } }) </script>
Output