Multiple directives on the same element causing conflicts

When multiple directives are applied to the same HTML element in AngularJS, they can conflict due to scope issues, priority order, and directive restrictions. This can lead to unexpected behavior, broken bindings, or runtime errors.

---

1️⃣ Understanding the Issue

Scenario: Multiple Directives on the Same Element

Consider an HTML element with multiple directives:

<div my-directive another-directive>{{ message }}</div>

Expected Behavior:

• Both myDirective and anotherDirective should work correctly without interfering with each other.

Actual Issue:

• Only one directive might work, or
• Directives might override each other, or
• An AngularJS error occurs due to conflicting priorities

---

2️⃣ Common Causes & Fixes

Cause 1: Directives Have Conflicting Scope Definitions

Problem:

• If both directives define an isolated scope, they cannot communicate with each other properly.
• The second directive overrides the first directive’s scope, breaking functionality.

❌ Incorrect Code (Both Directives Use Isolated Scope)

app.directive("myDirective", function() {
    return {
        restrict: "A",
        scope: { message: "@" }, // Isolated scope
        link: function(scope, element) {
            element.text("My Directive: " + scope.message);
        }
    };
});

app.directive("anotherDirective", function() {
    return {
        restrict: "A",
        scope: { message: "=" }, // Another isolated scope
        link: function(scope, element) {
            element.text("Another Directive: " + scope.message);
        }
    };
});

Solution: Use Shared (=) or Inherited (true) Scope

app.directive("myDirective", function() {
    return {
        restrict: "A",
        scope: false, // Inherit parent scope
        link: function(scope, element) {
            element.text("My Directive: " + scope.message);
        }
    };
});

app.directive("anotherDirective", function() {
    return {
        restrict: "A",
        scope: false, // Use same scope as myDirective
        link: function(scope, element) {
            element.text(element.text() + " | Another Directive: " + scope.message);
        }
    };
});

Now, both directives work on the same scope and do not override each other.

---

Cause 2: Directives Have Conflicting priority Values

Problem:

• AngularJS executes directives based on priority (default: 0).
• If two directives manipulate the same DOM element, the one with higher priority runs first.
• If they override the same property, only one directive takes effect.

Incorrect Code (Conflicting Priorities)

app.directive("myDirective", function() {
    return {
        restrict: "A",
        priority: 100, // High priority
        link: function(scope, element) {
            element.text("My Directive");
        }
    };
});

app.directive("anotherDirective", function() {
    return {
        restrict: "A",
        priority: 50, // Lower priority
        link: function(scope, element) {
            element.text("Another Directive");
        }
    };
});

Here, myDirective executes first, but anotherDirective overwrites its changes.

Solution: Ensure Compatible Priorities

app.directive("myDirective", function() {
    return {
        restrict: "A",
        priority: 100, // Higher priority
        link: function(scope, element) {
            element.text("My Directive | ");
        }
    };
});

app.directive("anotherDirective", function() {
    return {
        restrict: "A",
        priority: 101, // Slightly higher priority
        link: function(scope, element) {
            element.append("Another Directive");
        }
    };
});

Now, myDirective runs first, and anotherDirective appends its changes instead of replacing them.

---

Cause 3: Directives Have Conflicting restrict Values

Problem:

• If two directives restrict the same element with conflicting restrictions, only one applies.

Incorrect Code (One Directive Blocks the Other)

app.directive("myDirective", function() {
    return {
        restrict: "E",
        template: "<p>My Directive</p>"
    };
});

app.directive("anotherDirective", function() {
    return {
        restrict: "A",
        template: "<p>Another Directive</p>"
    };
});

Here, myDirective expects an element (E), but if used as an attribute, anotherDirective won’t work properly.

Solution: Use Compatible restrict Values

app.directive("myDirective", function() {
    return {
        restrict: "AE", // Allow both element & attribute usage
        template: "<p>My Directive</p>"
    };
});

app.directive("anotherDirective", function() {
    return {
        restrict: "AE", // Compatible with `myDirective`
        template: "<p>Another Directive</p>"
    };
});

Now, both directives can work on the same element or attribute without conflict.

---

Cause 4: Directives Modify the Same DOM Property

Problem:

• If both directives change the same attribute or inner HTML, they override each other.

Incorrect Code (Overwriting text())

app.directive("myDirective", function() {
    return {
        restrict: "A",
        link: function(scope, element) {
            element.text("My Directive");
        }
    };
});

app.directive("anotherDirective", function() {
    return {
        restrict: "A",
        link: function(scope, element) {
            element.text("Another Directive"); // Overwrites myDirective
        }
    };
});

anotherDirective replaces myDirective’s changes.

Solution: Append or Modify Separately

app.directive("myDirective", function() {
    return {
        restrict: "A",
        link: function(scope, element) {
            element.append("<span> My Directive </span>");
        }
    };
});

app.directive("anotherDirective", function() {
    return {
        restrict: "A",
        link: function(scope, element) {
            element.append("<span> Another Directive</span>");
        }
    };
});

Now, both directives modify the DOM independently without overwriting each other.