Html Class custom directive

 

In this example, We are using Class type directive for showing page header. We have a directive with name pageHeader and we are using “restrict: 'C',” which mean this is an Class type directive. We can use this class anywhere with the HTML class attribute in any html element. Example:<div class="page-header"></div>

See example below:

 
 
 
<!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 class="page-header"></div> </body> </html> <script> angular.module('Example', []) .directive("pageHeader", function () { return { restrict: 'C', template: '<div class="jumbotron container"><h3>Example 3:</h3><span>This is class type of directive</span></div>' } }) </script>
Output