AngularJS:作用域不能跨指令共享

AngularJS : Scope not shared across directives

本文关键字：指令 共享 不能 作用域 AngularJS      更新时间：2023-09-26

我在同一标签上有2个指令，<settings>和<modal>。settings提供一个模板，而modal创建一个隔离的作用域:

jsfiddle 

var app = angular.module('app', []);
app.directive('settings', function () {
    return {
        restrict: 'E',
        template: '<div>SETTINGS</div>',
        link: function (scope) {
            console.log('settings', scope.$id);
        }
    };
});
app.directive('modal', function () {
    return {
        restrict: 'A',
        scope: {},
        link: function (scope) {
            console.log('modal', scope.$id);
        }
    };
});

但是，它们不会共享相同的作用域，如日志所示:

<settings modal="settings"></settings>
settings 002
modal 003

直到1.2.0rc3版本，兄弟指令在创建时共享相同的隔离作用域。

从1.2.0版本开始，您不能(也不应该)从针对此隔离作用域编译的内容外部访问隔离作用域。你不应该这样做，因为你在两个指令之间创建了一个隐藏的关系。如果单例模式可以应用到你的用例中，最好通过require属性使用指令的控制器需求，或者通过注入的服务共享信息。

这最终与另一个关于具有隔离作用域版本冲突的指令的问题密切相关

scope: {}选项总是为指令创建一个孤立的作用域，它不关心其他指令

app.directive('modal', function () {
    return {
        restrict: 'A',
        scope: false,
        link: function (scope) {
            console.log('modal', scope.$id);
        }
    };
});

scope: false不会创建新的隔离作用域。如果你想让两个指令在它们之间工作，使用指令上的控制器，这样你就可以在它们之间共享数据。

相关文章：