Access isolated parent scope from a transcluded directive

Question

I've encountered a situation that seems to be the opposite of every similar question here on StackOverflow.

I've got a <scroll> directive, that simply wraps whatever content it has with a scrollable div of some sort. It looks more or less like this:

.directive('scroll', ['$document','$parse', function ($document,$parse) {
return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope:false,
    template:
        '<div class="scroll">' +
            '<div class="content" data-ng-transclude>' +
            '</div>' +
        '</div>',
    link: function (scope, element, attr) {
        // some code here....
    }
};
}]);

This works great in itself.

Now, I've got another directive called <editor> that has an isolated scope and uses <scroll> within it's template. <editor> looks more or less like:

.directive('editor', ['$document', function ($document){
return {
    restrict: 'EA',
    replace: true,
    transclude: false,
    scope:true,
    template:
        '<div>' +
            '....<scroll>....</scroll>....' +
        '</div>',
    link: function (scope, element, attrs) {
        .....
    }
};
}]);

Now, here's the deal: I need to access <editor>'s scope from within <scroll>'s link function (where it says "some code here"), but for some reason I can't. The scope variable in <scroll>'s link function is pretty much empty, and scope.$parent gives me the controller above, skipping the <editor> that's supposed to be in the way.

I've tried playing with ng-transclude in different places in the <editor> and tried using $emit and I'm really clueless about this - I would think that scope isolation would isolate "me and everything below me" from what's above, but it seems that scope isolation just takes "me" out of the scope tree...

Hope this is clear enough, thanks.

Answer 1

The code shown for the editor directive is not creating an isolate scope. Instead, it is creating a new child scope that prototypically inherits from the parent/containing scope.

Since the scroll directive has scope: false, it will use the child scope that editor creates -- no need for $parent.

Yes, the link function for editor will run after the link function for scroll. However, the controller function for editor (if you define one) will run before the link function for scroll:

app.directive('scroll', ['$document','$parse', function ($document,$parse) {
return {
    restrict: 'E',
    replace: true,
    transclude: true,
    scope:false,
    template:
        '<div class="scroll">' +
            '<div class="content" data-ng-transclude>' +
            '</div>' +
        '</div>',
    link: function (scope, element, attr) {
        // some code here....
        console.log('link_editor=',scope.link_editor);  // value is "undefined"
        console.log('ctrl_editor=',scope.ctrl_editor);  // value is "true"
    }
};
}]);
app.directive('editor', ['$document', function ($document){
return {
    restrict: 'EA',
    replace: true,
    transclude: false,
    scope:true,
    template:
        '<div>' +
            'stuff <scroll>content to scroll</scroll> more stuff' +
        '</div>',
    link: function (scope, element, attrs) {
        scope.link_editor = true;
    },
    controller: function($scope) {
        $scope.ctrl_editor = true;
    }
};
}]);