javascript - 多个指令需要共享相同的私有(private)范围

Question

我有两个指令，一个仅限于元素，另一个仅限于属性

<bar-foo special></bar-foo>

现在的问题是 special 指令需要在 barFoo 指令的范围内定义一些内容。但是，barFoo指令具有私有(private)范围

angular.module('App')
.directive('barFoo', function() {
    return {
        restrict: 'E',
        template: '<div><h1 ng-if="doit">Bar Foo</h1></div>',
        scope: { /* private scope */ },
        ....
    }
});

doit 值由special指令设置

angular.module('App')
.directive('special', function() {
    return {
        restrict: 'A',
        link: function (scope) {
            scope.doit = false;
        }
    }
});

问题是 barFoo 有一个私有(private)作用域，并且 doit 没有添加到该作用域(而是添加到 $parent)。我想知道是否可以让 special 指令与 barFoo 指令具有相同的范围？

我只能想到以下解决方案，1)添加一个额外的属性

<bar-foo special doit="doit"></bar-foo>

或2)将barfoo的模板html更改为

<div><h1 ng-if="$parent.doit">Bar Foo</h1></div>

虽然这很有效，但感觉有点像一种解决方法!

Answer 1

您建议的解决方案不是解决方法，实际上是一种可以接受的完成您需要的方法。

AngularJS 指令提供隔离范围的功能是有充分理由的。考虑到您想使用多个指令。作为一个复制元素，您需要确保该作用域与所有其他作用域保持隔离。

除了您建议的两种解决方案之外，还可以有第三种解决方案:

创建一个 angularjs service 来保存您的 doit 变量。创建 get() 和 update() 此变量的服务方法。然后，您可以在两个指令中注入(inject)此 service ，并通过调用服务方法在指令中共享 doit 变量。这样，无论您在指令中使用哪种范围，都可以确保共享相同的 doit 变量。

请注意，AngularJS service 是单例，因此每次您在服务上调用 get() 或 update() 时，您都会处理 doit 的同一个实例变量。