Using transclude causing scope duplication issues

When using transclude in AngularJS directives, you might face scope duplication issues where:

• A new isolated scope is created unexpectedly.
• The transcluded content does not reflect scope changes.
• The directive loses access to parent scope.

---

1. Understanding transclude in AngularJS

transclude allows you to insert content inside a directive, while maintaining access to the scope from where it was defined.

Example of transclude Usage

<custom-box>
   <p>This is transcluded content</p>
</custom-box>

app.directive("customBox", function() {
    return {
        restrict: "E",
        transclude: true,
        template: `<div class="box">
                        <h3>Box Header</h3>
                        <div ng-transclude></div>
                   </div>`
    };
});

Expected Behavior:

• The <p> inside <custom-box> should appear inside the directive’s template.
• It should retain the parent scope where it was defined.

---

2. Common Scope Duplication Issues with transclude

Issue 1: Transcluded Content Creating a New Isolated Scope

By default, transclude: true ensures that transcluded content keeps its parent scope. However, when combined with scope: {}, a new isolated scope is created, which can cause issues.

Example (Issue)

app.directive("customBox", function() {
    return {
        restrict: "E",
        transclude: true,
        scope: {},  // Isolated scope
        template: `<div class="box">
                        <h3>Box Header</h3>
                        <div ng-transclude></div>
                   </div>`
    };
});

Problem:

• The transcluded <p> still exists, but loses access to the original scope.
• If the <p> uses a variable like {{ message }}, it won’t work.

Solution: Use scope: false or scope: parent

app.directive("customBox", function() {
    return {
        restrict: "E",
        transclude: true,
        scope: false,  // Uses parent scope instead of isolated scope
        template: `<div class="box">
                        <h3>Box Header</h3>
                        <div ng-transclude></div>
                   </div>`
    };
});

Fixes the issue by keeping transcluded content inside the original parent scope.

---

Issue 2: Transcluded Scope Not Binding Correctly

When transcluded elements bind to a directive’s isolated scope, they may not update as expected.

Example (Issue)

<custom-box>
   <p>{{ message }}</p>
</custom-box>

app.directive("customBox", function() {
    return {
        restrict: "E",
        transclude: true,
        scope: { title: "@" },  // Isolated scope
        template: `<div class="box">
                        <h3>{{ title }}</h3>
                        <div ng-transclude></div>
                   </div>`
    };
});

Problem:

• The <p>{{ message }}</p> cannot access message from the parent scope.
• The directive isolated the transcluded content from the parent scope.

Solution: Use bindToController and Controller Syntax

Instead of using scope: {}, use a controller with bindToController.

app.directive("customBox", function() {
    return {
        restrict: "E",
        transclude: true,
        scope: {},  // Still isolated scope, but we use a controller
        bindToController: {
            title: "@"
        },
        controllerAs: "ctrl",
        controller: function() {
            this.internalMessage = "Inside Directive";
        },
        template: `<div class="box">
                        <h3>{{ ctrl.title }}</h3>
                        <div ng-transclude></div>
                   </div>`
    };
});

Fixes the issue by ensuring transcluded content stays linked to the right scope.

---

Issue 3: Using ng-transclude Inside a ng-repeat Causes Scope Duplication

If ng-transclude is used inside an ng-repeat, AngularJS creates multiple child scopes, leading to performance issues.

Example (Issue)

<custom-box ng-repeat="item in items">
    <p>{{ item.name }}</p>
</custom-box>

app.directive("customBox", function() {
    return {
        restrict: "E",
        transclude: true,
        scope: {},
        template: `<div class="box">
                        <div ng-transclude></div>
                   </div>`
    };
});

Problem:

• Each directive inside ng-repeat creates a new scope.
• Parent scope data (item.name) is not accessible inside ng-transclude.

Solution: Use transclude: 'element'

Instead of using ng-transclude inside ng-repeat, use transclude: 'element' to reuse the same scope.

app.directive("customBox", function() {
    return {
        restrict: "E",
        transclude: "element",
        link: function(scope, element, attrs, ctrl, transclude) {
            transclude(scope, function(clone) {
                element.after(clone);
            });
        }
    };
});

Fixes scope duplication issues by ensuring that the transcluded content stays inside the original scope.

---

Summary of Fixes

Issue	Solution
transclude not retaining parent scope	Use scope: false to keep the parent scope
Transcluded content not updating correctly	Use bindToController with a controller
ng-transclude causing duplicate scopes inside ng-repeat	Use transclude: 'element' instead
Isolated scope preventing transcluded content from working	Use scope: parent or avoid scope: {} unless necessary