Angular 嵌入指令作为同级范围与子指令的要求不兼容：“^parent”设置答案

【问题标题】：Angular transcluded directive as sibling scope incompatible with child directive's require: "^parent" settingAngular 嵌入指令作为同级范围与子指令的要求不兼容：“^parent”设置
【发布时间】：2014-05-14 06:59:43
【问题描述】：

我对 AngularJS 处理指令的嵌入范围的方式有疑问。众所周知，transclude 的范围是其指令范围的兄弟，而不是子范围。 Shown here

但是，我有一个子指令的情况：

 <div price-chart>
      <div volume-indicator></div>
 </div>

priceChart 指令有一个transclude: true, template: "<div ng-transclude></div>"，但（transcluded）volumeIndicator 要求父级是priceChart，而不是兄弟级。

function VolumeIndicatorDirective() {
    return {
        restrict: "EA",
        controller: "VolumeIndicatorController",
        require: ["^priceChart", "volumeIndicator"],
        compile: function compile(element, attrs, transclude) {
            return {
                pre: function preLink($scope, element, attrs, controllers) {
                    var priceChart = controllers[0];
                    var volumeIndicator = controllers[1];
                    priceChart.addIndicator(volumeIndicator);
                },
                post: angular.noop
            };
        }
    };
}

如果 Angular 有一个可以解决问题的控制器的兄弟选择器：

require: ["+priceChart", "volumeIndicator"],

但是，这不存在，我该怎么办？

根据 zeroflagL 的评论，我尝试使用 element.parent().controller() 访问指令控制器，但它似乎专门获得了最近的 ng-controller 并跳过了指令控制器。

【问题讨论】：

来自文档：“通过搜索 ELEMENT 的父级找到所需的控制器”- 范围无关紧要。
感谢您的评论。我试过了，它似乎跳过了指令控制器并获得了最近的父级ng-controller。尝试了 element.controller() 和每个可能的父级（parent()、parent().parent() 等）。更新OP
我的意思是你的代码应该可以工作。你得到什么错误？至于element.parent().controller() - 它必须是element.parent().controller('priceChart')。

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

根据文档，require 的 '^' 语法将尝试“通过搜索元素的父元素来定位所需的控制器”。范围原型继承在这里不起作用，因此您的代码应该按预期工作。

确实是it does！

【讨论】：

你是对的，实际上它是一个更高级别的父指令通过使用“templateUrl”jsfiddle.net/hG2c7/5 导致问题。这会导致指令异步加载并破坏父/子链接顺序，使 volumeIndicator 在其父链接之前链接，因此缺少控制器。这个答案很好地描述了这一点stackoverflow.com/a/22081483/1267778
不幸的是，templateUrl 仍然会异步加载，即使它是使用静态模板脚本标签包含在内的。我通过在完成加载并侦听子级事件以继续时从父级触发事件来解决此问题的方法。