maX*_*maX 20 angularjs angularjs-directive angularjs-controller
我试图以递归方式到达父"box"指令的控制器:
<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>
我希望控制器变量undefined在链接函数中,但我得到实际box指令的控制器.
所以我的问题是......在这种情况下如何访问PARENT控制器:
<box>
<box></box>
</box>
Joe*_*luh 39
从Angular 1.3开始,您可以使用两个重音^^来在"仅"父元素中搜索指令.
来自Angular Docs的require报价:
(no prefix)- 在当前元素上找到所需的控制器.如果找不到则抛出错误.?- 尝试找到所需的控制器或将null传递给链接fn(如果未找到).^- 通过搜索元素及其父元素来定位所需的控制器.如果找不到则抛出错误.^^- 通过搜索元素的父项找到所需的控制器.如果找不到则抛出错误.?^- 尝试通过搜索元素及其父元素来定位所需的控制器,或者如果未找到则将null传递给链接fn.?^^- 尝试通过搜索元素的父元素来定位所需的控制器,或者如果未找到则将null传递给链接fn.
在您的情况下,替换require: '?^box',为require: '?^^box',
maX*_*maX 18
好的,发现它......
如果你想获得父元素的控制器:
...
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');
}
...
这将返回父指令的控制器,或者更高一级,父指令的控制器,如果你需要确保你得到一个DIRECT父控制器,我发现了这个(也许有更好的解决方案,我不知道知道):
...
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>
当在"框a"上调用链接函数时,undefined在两种情况下都是parentCtrl .当在"框b"上调用链接函数时,parentCtrl在两种情况下都是"box a"的控制器.
例2:
<box id="a">
<div>
<box id="b"></box>
</div>
<box>
当在"框a"上调用链接函数时,undefined在两种情况下都是parentCtrl .当在"方框b"上调用链接函数时,在两种情况下,parentCtrl仍然是"box a"的控制器,但是hasDirectBoxParent是false,因此您可以区分父级和祖父级.
| 归档时间： |
|
| 查看次数： |
23353 次 |
| 最近记录： |