如何通过要求递归访问父指令的控制器？ [英] How to access parent directive's controller by requiring it recursively?
问题描述
我试图达成一个父盒子指令的控制器递归：
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，找到了......
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];
}
...
实施例1：
<box id="a">
<box id="b"></box>
<box>
在链接功能的框调用，parentCtrl是未定义在这两种情况下。
当链路功能的盒子B调用，parentCtrl就是控制器盒子一，在这两种情况下。
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.
例2：
<box id="a">
<div>
<box id="b"></box>
</div>
<box>
在链接功能的框调用，parentCtrl是未定义在这两种情况下。
当链路功能的盒子B调用，parentCtrl仍然是控制器盒子一，在这两种情况下，但hasDirectBoxParent是假，这样你就可以区别于父祖父母。
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屋！
