In AngularJS, directives can be restricted to specific types of elements using the restrict property.
The restrict property defines where the directive can be applied in HTML:
E(Element) →<my-directive></my-directive>A(Attribute) →<div my-directive></div>C(Class) →<div class="my-directive"></div>M(Comment) →<!-- directive: my-directive -->
Let’s explore each one with examples. 🚀
1. E (Element Directive)
A directive that can be used only as an HTML element.
Example – Element Directive (E)
Directive Code (JavaScript)
var app = angular.module("myApp", []);
app.directive("customElement", function () {
return {
restrict: "E",
template: "<div><h3>Element Directive</h3><p>This directive is used as an element.</p></div>"
};
});
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<custom-element></custom-element> <!-- Using directive as an element -->
</body>
</html>
Explanation:
✔ The directive is used as <custom-element></custom-element>.
✔ Best for UI components like modals, buttons, and widgets.
2. A (Attribute Directive)
A directive that can be used only as an attribute inside an HTML tag.
Example – Attribute Directive (A)
Directive Code (JavaScript)
app.directive("customAttribute", function () {
return {
restrict: "A",
template: "<h3>Attribute Directive</h3><p>This directive is used as an attribute.</p>"
};
});
HTML Code
<div custom-attribute></div> <!-- Using directive as an attribute -->
Explanation:
✔ The directive is applied as an attribute inside a <div>.
✔ Best for adding behavior to existing elements (e.g., tooltips, hover effects).
3. C (Class Directive)
A directive that can be used only as a class inside an HTML element.
Example – Class Directive (C)
Directive Code (JavaScript)
app.directive("customClass", function () {
return {
restrict: "C",
template: "<h3>Class Directive</h3><p>This directive is used as a class.</p>"
};
});
HTML Code
<div class="custom-class"></div> <!-- Using directive as a class -->
Explanation:
✔ The directive is applied using the CSS class name custom-class.
✔ Best for styling-related functionality like animations or visibility toggles.
4. M (Comment Directive)
A directive that can be used inside an HTML comment.
Example – Comment Directive (M)
Directive Code (JavaScript)
app.directive("customComment", function () {
return {
restrict: "M",
replace: true,
template: "<h3>Comment Directive</h3><p>This directive is used as a comment.</p>"
};
});
HTML Code
<!-- directive: custom-comment -->
Explanation:
✔ The directive is applied inside an HTML comment.
✔ Not commonly used, but can be helpful for debugging or temporary content rendering.
5. Using Multiple Restrictions
You can combine multiple restrictions (E, A, C, M) in a single directive.
Example – Directive with E and A
app.directive("multiRestrict", function () {
return {
restrict: "EA", // Can be used as both Element and Attribute
template: "<h3>Multi Restriction Directive</h3><p>Can be used as element or attribute.</p>"
};
});
Usage in HTML
<multi-restrict></multi-restrict> <!-- As an element -->
<div multi-restrict></div> <!-- As an attribute -->
6. When to Use Each Restriction?
| Restriction | Usage Example | Best For |
|---|---|---|
E (Element) | <custom-directive></custom-directive> | UI Components (Modals, Widgets) |
A (Attribute) | <div custom-directive></div> | Adding Behavior (Hover, Click Effects) |
C (Class) | <div class="custom-directive"></div> | Styling & Animations |
M (Comment) | <!-- directive: custom-directive --> | Debugging, Hidden Content |