How to use restrict option in AngularJS Custom Directive?

Among several advanced features of AngularJS, Directive is a major Chapter. Using Directive we can reuse our Codes like a widget. Directive comes with many Directive Definition Objects (DDO). From them restrict is one. Using restrict option inside a Custom Directive we can prevent the access level of Directive for Element(E), Attribute(A), Comment(M) or Class(C).

For an example if you want to use your Custom Directive only like a element in view (<elem-attr-directive></elem-attr-directive>) then while creating the Directive pass the restrict option E (restrict: “E”). Similarly if you want to restrict the use of directive like an Attribute then you can pass A in place of E or else if you want your directive to be used like an element or attribute you can pass AE together (restrict: “AE”).

To make your vision clear in below I am sharing an example using restrict option inside Custom Directives. In this demo app I created 3 Custom Directives. The first one is restricted to use like Element or Attribute. The second one “customColor” directive is restricted to use like Class and the third one “commentDirective” is a directive to use during Comments.

Notice Carefully, depending upon the restrict option, structure of each directive is different. The first on “elemAttrDirective” is restricted to use like an Element or Attribute. The cause it’s having template option. Using template here I am showing a line of text followed by H1 tag. Where in my second directive “customColor” I am finding the HTML Elements from DOM using link function and then applying CSS Style as this directive is restricted to use like a Class. Similarly in “commentDirective” I am using template and replace option to rewrite the Comment while using in view. Make a note while using a directive which is restricted to use in Comment block you have to put you directive name followed by “directive:”.

Using restrict option in AngularJS Custom Directive

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>

<body ng-app="DemoApp">

<!-- In view of using restrict option for Element(E) -->
<elem-attr-directive></elem-attr-directive>

<!-- In view of using restrict option for Attribute(A) -->
<div elem-attr-directive></div>

<!-- In view of using restrict option for CSS Class(C) -->
<div class="custom-color">This is a Class based Custom Directive in AngularJS</div>

<!-- In view of using restrict option for Comment(M) -->
<!-- directive:comment-directive -->

<script>
var DemoApp = angular.module("DemoApp", []);

/* Always declaring directive name using Camel Case */
DemoApp.directive("elemAttrDirective", function() {
return {
restrict: "AE",
template: "<h1>This line is from Directive using restrict option AE.</h1>"
};
});

DemoApp.directive("customColor", function() {
return {
restrict: "C",
link: function(scope, element, attrs) {
element.css("color", "#FF0000");
}
}
});

DemoApp.directive('commentDirective', function() {
return {
restrict: 'M',
replace: true,
template: '<div>This line is from "commentDirective" Custom Directive.</div>'
};
});
</script>

</body>
</html>