0

我遇到的情况似乎与 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>应该在路上的那个。

我试过ng-transclude在不同的地方玩<editor>并尝试使用$emit，但我对此一无所知 - 我认为范围隔离会将“我和我下面的一切”与上面的东西隔离开来，但似乎范围隔离只需要范围树中的“我”...

希望这足够清楚，谢谢。

4

1 回答 1

0

为指令显示的代码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;
    }
};
}]);
于 2013-08-05T18:51:18.540 回答