![指令控制器需要父指令控制器]( "指令控制器需要父指令控制器")
本文介绍了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！"的警报.
谢谢.
解决方案
这里有两种方法可以解决您的问题:
- 由于您使用的是
scope: true，因此所有范围都原型继承.因此，如果你在 $scope 上而不是在 screen 控制器中的 this 上定义你的方法，那么 component 和widget 将可以访问函数 doSomethingScreeny.
小提琴. - 在
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:
- 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. - 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 指令控制器需要父指令控制器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！