Custom Directive as Element, Attribute and Class

 

In this example, we are using Html Attribute,Html element and Html class type directive in the same directive that will display page header. It means we can use our directive as a html element, attribute and as well as class too. We have a directive with name pageHeader and defined its parameter like restrict: 'AEC', which mean this will work as “Html attribute”, "Html element" and "Html class" type directive. Example:


, and


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