AngularJS 指令控制器需要父指令控制器? [英] AngularJS directive controllers requiring parent directive controllers?

问题描述

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

.directive('screen', function() {返回 {范围:真实，控制器:函数(){this.doSomethingScreeny = function() {警报(屏幕！")；}}}}).directive('组件', function() {返回 {范围:真实，控制器:函数(){this.componentFunction = function() {什么.doSomethingScreeny();}}}}).directive('widget', function() {返回 {范围:真实，要求:^组件"，链接:功能(范围，元素，属性，组件Ctrl){scope.widgetIt = function() {componentCtrl.componentFunction();};}}})<div 屏幕>
<div 小部件><button ng-click="widgetIt()">Woo Hoo</button>

我可以使用 require: "^component" 在小部件的链接 fn 中要求父组件，但是我如何进一步授予组件控制器访问其包含屏幕的权限?

我需要的是组件中的 WHAT，因此当您单击小部件的按钮时，它会发出screeny！"的警报.

谢谢.

解决方案

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

1. 由于您使用的是 scope: true，因此所有范围都原型继承.因此，如果您在 screen 控制器中的 $scope 而不是 this 上定义方法，则 component 和widget 将可以访问函数 doSomethingScreeny.
   小提琴.
2. 在component 和require: '^screen' 上定义一个链接函数.在链接函数中，将 screenCtrl 保存到范围属性，然后您可以在指令的控制器中访问它(注入 $scope).
   小提琴.

I might be thinking about this completely backwards, but I'm trying to make three nested directives, lets call them: screen, component and widget. I want widget to be able to trigger some behavior in component, which in turn triggers some behavior in screen. So:

.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>

I can require parent components in a widget's link fn using require: "^component", but how do I further give components controller access to its containing screen?

What I need is the WHAT in component so when you click the widget's button it alerts "screeny!".

Thanks.

解决方案

Here are two ways you could solve your problem:

1. Since you are using scope: true, all scopes prototypically inherit. So if you define your methods on $scope instead of on this in the screen controller, then both component and widget will have access to function doSomethingScreeny.
   Fiddle.
2. Define a link function on component and require: '^screen'. In the link function, save the screenCtrl to a scope property, then you can access it in the directive's controller (inject $scope).
   Fiddle.

这篇关于AngularJS 指令控制器需要父指令控制器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！