How to save an area with nested directives?

Question

My goal is to create a flexible set of directives for a reusable and easy user interface. Each of them has isolated coverage, and many of them transmit content. I want each directive to be a black box - the user, ideally, would not need to know if he would internally set another directive when writing the content that needs to be translated.

According to the Angular directive for directives :

The transclude parameter changes the way the areas are nested. This makes the contents of the transclosed directive have any scope outside the directive, and not any scope inside. At the same time, it gives content access to the external area.

I found that this works as described using a single directive. However, if there is another directive embedded in one that also transfers content, then the broadcast content is allowed within the framework of an external directive, and not in the area that is outside. This is a problem because it does not allow users to know in which area their broadcast content will be allowed!

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 HTML:

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

Inside an element, it <inner></inner> {{value}}is evaluated within the parent area as "primary" (as expected). However, inside the element it <outer></outer> {{value}}is evaluated within the selected area outeras “external” (not expected). Thus, the directive template can affect the area in which the converted content is allowed!

Is there any way around this problem?

Answer 1

. ng-transcude , , . , .

$ ; , :

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

; , :

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

; transclude setTransclusionFn, transclude.

Answer 2

! Angular , , , . , :

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

"" .