指令控制器需要父指令控制器

指令控制器需要父指令控制器

本文介绍了AngularJS 指令控制器需要父指令控制器?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

.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,因此所有范围都原型继承.因此,如果你在 $scope 上而不是在 screen 控制器中的 this 上定义你的方法,那么 componentwidget 将可以访问函数 doSomethingScreeny.
    小提琴.
  2. componentrequire: '^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 指令控制器需要父指令控制器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-15 06:23