Question

我在同一个代码<settings>和<modal>上有2个指令。 settings提供了一个模板，而modal创建了一个独立的范围：

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

为什么？

Answer 1

scope: {}选项总是为指令创建一个独立的范围，它不关心其他指令

Answer 2

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

从版本1.2.0开始，您不能（也不应该）从针对此隔离范围编译的内容之外访问隔离范围。您不应该因为您在两个指令之间创建隐藏关系。通过require属性更好地使用指令的控制器要求，或者如果可以将单例模式应用于您的用例，则通过注入的服务共享信息。

最后，与Directives with Isolated scope versions conflict

的其他问题密切相关

Answer 3

app.directive('modal', function () {
    return {
        restrict: 'A',

        scope: false,

        link: function (scope) {
            console.log('modal', scope.$id);
        }
    };
});

scope：false不会创建新的隔离范围。我想让两个指令在它们之间工作使用需要指令的控制器，这样你就可以在它们之间共享数据。

AngularJS：不跨指令共享范围

3 个答案: