Cannot use multiple directives with different templates on the same element

When trying to apply multiple directives with different templates on the same HTML element, AngularJS throws an error. This is because only one directive can define a template (template or templateUrl) per element.

---

1. Understanding the Issue

Problem Example

<div my-directive another-directive></div>

app.directive("myDirective", function() {
    return {
        restrict: "A",
        template: "<p>Content from myDirective</p>"
    };
});

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

Error:

Multiple directives [myDirective, anotherDirective] asking for template on the same element.

---

2. Why Does This Happen?

• AngularJS does not allow multiple templates on the same element because:
  • It cannot determine which template to apply.
  • It prevents conflicts and unexpected behaviors.
  • Only one directive can modify the DOM with a template or templateUrl.

---

3. Solutions to Fix the Issue

Solution 1: Use ng-include for Multiple Templates

Instead of defining multiple templates, use ng-include to load different templates dynamically.

<div my-directive>
    <div ng-include="'another-template.html'"></div>
</div>

app.directive("myDirective", function() {
    return {
        restrict: "A",
        template: "<p>Content from myDirective</p>"
    };
});

another-template.html

<p>Content from anotherDirective</p>

Now, both templates will be included without conflicts.

---

Solution 2: Merge the Directives into One

Instead of applying multiple directives to the same element, combine their logic into a single directive.

app.directive("combinedDirective", function() {
    return {
        restrict: "A",
        template: `
            <p>Content from myDirective</p>
            <p>Content from anotherDirective</p>
        `
    };
});

<div combined-directive></div>

Now, both directive contents appear together.

---

Solution 3: Use compile() to Merge Directives

Instead of defining separate template properties, use compile() to manipulate the DOM manually.

app.directive("myDirective", function() {
    return {
        restrict: "A",
        compile: function(element) {
            element.append("<p>Content from myDirective</p>");
        }
    };
});

app.directive("anotherDirective", function() {
    return {
        restrict: "A",
        compile: function(element) {
            element.append("<p>Content from anotherDirective</p>");
        }
    };
});

<div my-directive another-directive></div>

This method dynamically adds both contents without template conflicts.

---

Solution 4: Use a Parent Directive with transclude

Instead of adding multiple templates, use transclusion (transclude: true) to allow multiple directives to add content.

app.directive("parentDirective", function() {
    return {
        restrict: "E",
        transclude: true,
        template: `<div>
                     <h3>Main Directive</h3>
                     <ng-transclude></ng-transclude>
                   </div>`
    };
});

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

<parent-directive>
    <child-directive></child-directive>
</parent-directive>

This allows multiple directives without conflicts.