How does one preserve scope with nested directives?

Question

My goal is to create a flexible set of directives for reusable and lightweight UI elements. Each has an isolated scope, and many of them transclude content. I want each directive to be a black box - the user ideally wouldn't need to know whether it nests another directive internally when writing the content to be transcluded.

According to the Angular guide to directives:

The transclude option changes the way scopes are nested. It makes it so that the contents of a transcluded directive have whatever scope is outside the directive, rather than whatever scope is on the inside. In doing so, it gives the contents access to the outside scope.

I have found that this works as described when using a single directive. However, if there is another directive nested in that one that also transcludes the content, then the transcluded content is resolved within the scope of the outer directive, rather than the scope that is on the outside. This is a problem, because it prevents users from knowing in what scope their transcluded content will be resolved!

For example: (fiddle)

.controller('main', function ($scope) {
    $scope.value = '"main"';
    $scope.expected = $scope.value;
})

.directive('outer', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: { expected:'=' },
        controller: function ($scope) {
            $scope.value = '"outer"';
        },
        template: '<div><inner expected="expected"><span ng-transclude></span></inner></div>'
    };
})

.directive('inner', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: { expected:'=' },
        controller: function ($scope) {
            $scope.value = '"inner"';
        },
        template: '<div><span>\'value\' is expected to be resolved in scope {{expected}}, and is resolved in scope </span><span ng-transclude></span></div>'
    };
})

And the HTML:

<div ng-controller="main">
    <inner expected="value">
        <span>{{value}}</span>
    </inner>
    <hr/>
    <outer expected="value">
        <span>{{value}}</span>
    </outer>
</div>

Inside the <inner></inner> element {{value}} is evaluated within the parent scope as "main" (as expected). However, inside the <outer></outer> element {{value}} is evaluated within the isolated scope of outer as "outer" (not expected). In this way, the template of the directive can affect the scope in which the transcluded content is resolved!

Is there any way to work around this issue?

So that the directive can be reused anywhere without unexpected interactions with its parent scope. — starchild, Jan 31 '14 at 20:18
but your questions is about interacting with the parent scope? — Dalorzo, Jan 31 '14 at 20:41
The transcluded content should be resolved in the parent scope (as the angular doc describes), but the directive itself shouldn't be interacting with the parent scope (as the angular doc recommends). — starchild, Jan 31 '14 at 21:10
Can you show me what angular docs recommends isolated scope? I think you may be misinterpreting its purpose. — Dalorzo, Jan 31 '14 at 21:26
@Dalorzo The last part of [this section](http://docs.angularjs.org/guide/directive#creating-custom-directives_demo_isolating-the-scope-of-a-directive) of the angular directives guide states: "Best Practice: Use the scope option to create isolate scopes when making components that you want to reuse throughout your app." — starchild, Jan 31 '14 at 21:37

score 1 · Answer 1 · answered Feb 03 '14 at 12:13

1

This really sucks indeed! Angular only calls one parent in isolated scope, and if it doesn't find what it needs it stops looking. To solve this, you can manually call the scope's parent like so:

controller: function ($scope) {
    $scope.value = $scope.$parent.value || '"outer"';
}

This will "make" him look further up the chain.

answered Feb 03 '14 at 12:13

Yair Tavor

2,538
1
20
16

This can work, but I'm looking for a more flexible solution. These directives don't necessarily know how deep they will be nested, or how many `.$parent`s to chain. – starchild Feb 03 '14 at 21:59

score 0 · Accepted Answer · answered Feb 03 '14 at 21:54

After some tinkering I found a solution. I created two new directives to replace the default ng-transcude, and a helper service that stores the state shared between the directives. Together they allow the deep transclusion that I was looking for.

The first stores $transclude into the service; it must be used within every directive that can be given transcludible content in a template:

controller: ['$transclude', 'TransclusionHelper', function($transclude,TransclusionHelper) {
    TransclusionHelper.setTransclusionFn($transclude);
}],

The second performs the transclusion of the content to its final location; it need not be used in directives that only pass through their transcluded content to a child:

link: ['$element','TransclusionHelper', function($element,TransclusionHelper) {
    TransclusionHelper.transclude(function(clone) {
        $element.empty();
        $element.append(clone);
    });
}],

Some finesse is required in the service to manage state; if several calls to setTransclusionFn are made before a call to transclude, only the first should be stored and used when transclude is called.

How does one preserve scope with nested directives?

2 Answers2