Question

我遇到的情况似乎与StackOverflow上的每个类似问题相反。

我有一个<scroll>指令，它只是用某种可滚动的div包装它所拥有的任何内容。看起来或多或少是这样的：

.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....
    }
};
}]);

这本身很有用。

现在，我有另一个名为<editor>的指令，它有一个隔离范围并在其模板中使用<scroll>。 <editor>看起来或多或少像：

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

现在，这是交易：我需要从<editor>的链接功能（在此处显示“某些代码”）中访问<scroll>的范围，但由于某种原因我不能。 scope的链接函数中的<scroll>变量非常空，scope.$parent为我提供了上面的控制器，跳过了应该挡住的<editor>。 / p>

我尝试在ng-transclude的不同地方玩<editor>，并尝试使用$emit，我真的对此毫无头绪 - 我认为范围隔离会隔离“我和我下面的一切“从上面的内容开始，但似乎范围隔离只是将”我“带出了范围树......

希望这很清楚，谢谢。

Answer 1

editor指令显示的代码未创建隔离范围。相反，它正在创建一个新的子范围，原型继承自父/包含范围。

由于scroll指令有scope: false，因此它将使用editor创建的子范围 - 不需要$parent。

是的，editor的链接功能将在scroll的链接功能之后运行。但是，editor的控制器函数（如果您定义了一个）将在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;
    }
};
}]);

从transcluded指令访问隔离的父作用域

1 个答案: