如何通过递归要求访问父指令的控制器? [英] How to access parent directive's controller by requiring it recursively?
问题描述
我正在尝试以递归方式访问父box"指令的控制器:
<!-- 无嵌套:parent 是唯一的主体--><盒子></盒子><script type="text/javascript">angular.module('main', []).directive('box', function() {返回 {限制:'E'，控制器:函数(){}，require: '?^box',//找到可选的 PARENT "box" 指令链接:功能(范围，iElement，iAttrs，控制器){//控制器应该是未定义的，因为没有父框alert('找到控制器:' + (controller !== undefined));}};});我希望控制器变量在链接函数中是 undefined，但我得到了实际 box 指令的控制器.
所以我的问题是...如何在这种情况下访问 PARENT 控制器:
<盒子></盒子></盒子> 好的，找到了...
如果你想获取父元素的控制器:
<预><代码>...链接:功能(范围，iElement，iAttrs，控制器){//http://docs.angularjs.org/api/angular.element//jQuery/jqLite 附加功能:////controller(name) - 检索当前元素或其父元素的控制器.//默认情况下检索与 ngController 指令关联的控制器.//如果名称作为camelCase指令名称提供，则此控制器//指令将被检索(例如'ngModel').var parentCtrl = iElement.parent().controller('box');}...这将返回父指令的控制器或更高一级的父指令的控制器，如果您需要确保获得 DIRECT 父指令的控制器，我发现了这个(也许有更好的解决方案，我不知道):
<预><代码>...控制器:函数($scope，$element){//将元素存储在控制器中，我们稍后会用到它this.$element = $element;},//适用于前链接和后链接函数链接:函数(){var parentElement = $element.parent();var parentCtrl = parentElement.controller('box');var hasDirectBoxParent = parentCtrl &&parentCtrl.$element[0] === parentElement[0];}...示例 1:
<box id="b"></box><盒子> 当在框 a"上调用链接函数时，在这两种情况下 parentCtrl 都是 undefined.当在box b"上调用link函数时，在这两种情况下，parentCtrl都是box a"的控制器.
示例 2:
<div><box id="b"></box> <盒子>
当在框 a"上调用链接函数时，在这两种情况下 parentCtrl 都是 undefined.当在box b"上调用link函数时，在这两种情况下，parentCtrl仍然是box a"的控制器，但是hasDirectBoxParent是false，所以你可以区分父和祖父.
I'm trying to reach the controller of a parent "box" directive recursively:
<body ng-app="main">
<!-- no nesting: parent is the just body -->
<box></box>
<script type="text/javascript">
angular.module('main', [])
.directive('box', function() {
return {
restrict: 'E',
controller: function() { },
require: '?^box', // find optional PARENT "box" directive
link: function(scope, iElement, iAttrs, controller) {
// controller should be undefined, as there is no parent box
alert('Controller found: ' + (controller !== undefined));
}
};
});
</script>
</body>
I'd expect controller variable to be undefined in the link function, but I get the controller of the actual box directive.
So my question is ... how to gain access to the PARENT controller in case like this:
<box>
<box></box>
</box>
OK, found it...
if you want to get hold of the controller of a parent element:
...
link: function(scope, iElement, iAttrs, controller) {
// http://docs.angularjs.org/api/angular.element
// jQuery/jqLite Extras:
//
// controller(name) - retrieves the controller of the current element or its parent.
// By default retrieves controller associated with the ngController directive.
// If name is provided as camelCase directive name, then the controller for this
// directive will be retrieved (e.g. 'ngModel').
var parentCtrl = iElement.parent().controller('box');
}
...
This returns either controller of parent directive or, one level higher, the controller of parent's parent directive, If you need to make sure you get a controller of a DIRECT parent, I found this (maybe there is a better solution, I don't know):
...
controller: function($scope, $element) {
// store the element in controller, we'll need it later
this.$element = $element;
},
// works in both pre and post link functions
link: function() {
var parentElement = $element.parent();
var parentCtrl = parentElement.controller('box');
var hasDirectBoxParent = parentCtrl && parentCtrl.$element[0] === parentElement[0];
}
...
Example 1:
<box id="a">
<box id="b"></box>
<box>
When the link function is invoked on "box a", parentCtrl is undefined in both cases.
When the link function is invoked on "box b", parentCtrl is the controller of "box a" in both cases.
Example 2:
<box id="a">
<div>
<box id="b"></box>
</div>
<box>
When the link function is invoked on "box a", parentCtrl is undefined in both cases.
When the link function is invoked on "box b", parentCtrl is still the controller of "box a" in both cases, but hasDirectBoxParent is false, so you can distinguish parent from a grandparent.
这篇关于如何通过递归要求访问父指令的控制器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
