AngularJS 指令 Controller 需要父指令 Controller ？

Question

我可能会完全倒退考虑这个问题，但我正在尝试制作三个嵌套指令，让我们称之为:屏幕、组件和小部件。我希望小部件能够触发组件中的某些行为，从而触发屏幕中的某些行为。所以:

.directive('screen', function() {
    return {
        scope: true,
        controller: function() {
            this.doSomethingScreeny = function() {
                alert("screeny!");
            }
        }
    }
})

.directive('component', function() {
    return {
        scope: true,
        controller: function() {
            this.componentFunction = function() {
                WHAT.doSomethingScreeny();
            }
        }
    }
})

.directive('widget', function() {
    return {
        scope: true,
        require: "^component",
        link: function(scope, element, attrs, componentCtrl) {
            scope.widgetIt = function() {
                componentCtrl.componentFunction();
            };
        }
    }
})

<div screen>
    <div component>
        <div widget>
            <button ng-click="widgetIt()">Woo Hoo</button>
        </div>
    </div>
</div>

我可以使用 require: "^component" 在小部件的链接 fn 中要求父组件，但是如何进一步让组件 Controller 访问其包含的屏幕？

我需要的是组件中的 WHAT，因此当您单击小部件的按钮时，它会警告“screeny!”。

谢谢。

Answer 1

这里有两种方法可以解决您的问题:

由于您使用的是 scope: true ，所有范围原型(prototype)继承。所以如果你在 $scope 上定义你的方法而不是 this在 screen Controller ，然后都是 component和 widget将有权访问功能 doSomethingScreeny .
Fiddle .

在 component 上定义链接函数和 require: '^screen' .在链接函数中，将 screenCtrl 保存到范围属性中，然后您可以在指令的 Controller 中访问它(注入(inject) $scope )。
Fiddle .