Question

我试图以递归方式到达父“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>

http://jsfiddle.net/gjv9g/1/

Answer 1

从Angular 1.3开始，你可以使用两个重音^^来搜索父元素中的指令“only”。

来自Angular Docs on require：

的引用

(no prefix) - 在当前元素上找到所需的控制器。如果找不到则抛出错误。

? - 尝试找到所需的控制器或将null传递给链接fn（如果未找到）。

^ - 找到   搜索元素及其父元素所需的控制器。如果找不到则抛出错误。

^^ - 通过搜索元素的父项找到所需的控制器。如果找不到则抛出错误。

?^ - 尝试通过搜索元素及其父元素来找到所需的控制器，或者如果未找到则将null传递给链接fn。

?^^ - 尝试通过搜索元素的父级来找到所需的控制器，或者如果找不到则将null传递给链接fn。

在您的情况下，请将require: '?^box',替换为require: '?^^box',

Answer 2

好的，发现它......

如果你想获得父元素的控制器：

...
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”上调用链接功能时，在两种情况下，parentCtrl都是undefined。当在“方框b”上调用链接函数时，parentCtrl在两种情况下都是“方框a”的控制器。

示例2：

<box id="a">
    <div>
        <box id="b"></box>
    </div>
<box>

当在“方框a”上调用链接功能时，在两种情况下，parentCtrl都是undefined。当在“方框b”上调用链接函数时，在两种情况下，parentCtrl仍然是“box a”的控制器，但hasDirectBoxParent是false，因此您可以区分父级和祖父级。

Answer 3

require将控制器从必需的（父）指令注入到当前指令中（来自angular docs：“require - 需要另一个指令并将其控制器作为第四个参数注入到链接函数”{{ 3}}）

所以也许你已经得到了你想要的东西？也就是说，父控制器通过controller参数注入子项。

如何通过递归要求访问父指令的控制器？

3 个答案: