Directive restrict mismatch

A “Directive restrict mismatch” error usually occurs in AngularJS when there is a mismatch between the directive’s restrict property and how the directive is used in HTML. The restrict property defines how a directive can be used (as an element, attribute, class, or comment).

---

Step-by-Step Solution to Fix “Directive Restrict Mismatch”

Step 1: Understand Directive Restrictions

The restrict property in AngularJS specifies how a directive can be used in HTML. It accepts the following values:

Restrict Value	Usage in HTML	Example
'E' (Element)	<my-directive></my-directive>	Allowed only as an element
'A' (Attribute)	<div my-directive></div>	Allowed only as an attribute
'C' (Class)	<div class="my-directive"></div>	Allowed only as a class
'M' (Comment)	<!-- directive: my-directive -->	Allowed only in comments
'EA' (Element & Attribute)	<my-directive></my-directive> and <div my-directive></div>	Allowed both as element & attribute

---

Step 2: Identify the Issue

The “Directive restrict mismatch” error occurs when you use a directive in an incorrect way.

Example of an Error

app.directive("myDirective", function() {
    return {
        restrict: "E",  // Only allows element usage
        template: "<h2>Hello from directive</h2>"
    };
});

htmlCopyEdit<!-- Wrong usage: Used as an attribute instead of an element -->
<div my-directive></div>

This causes an error because the directive is restricted to elements (E), but it is being used as an attribute.

---

Step 3: Fix the Restriction Mismatch

Solution 1: Match Restriction to Usage

If you want to use it as an attribute, change the restrict property to include 'A'.

app.directive("myDirective", function() {
    return {
        restrict: "A",  // Allows usage as an attribute
        template: "<h2>Hello from directive</h2>"
    };
});

htmlCopyEdit<!-- Now this works correctly -->
<div my-directive></div>

Solution 2: Change HTML to Match Restriction

If the directive is restricted to 'E', ensure you use it as an element.

app.directive("myDirective", function() {
    return {
        restrict: "E",
        template: "<h2>Hello from directive</h2>"
    };
});

<!-- Now this works correctly -->
<my-directive></my-directive>

Solution 3: Use Multiple Restrictions

If you want to allow both element and attribute usage:

app.directive("myDirective", function() {
    return {
        restrict: "EA",  // Allows both element and attribute usage
        template: "<h2>Hello from directive</h2>"
    };
});

<!-- Both of these will work -->
<my-directive></my-directive>
<div my-directive></div>

---

Step 4: Verify Usage in Other Cases

• If using a class-based directive (restrict: 'C'), ensure it is used as a class.
• If using a comment-based directive (restrict: 'M'), ensure it is correctly placed in an HTML comment.