角度transcluded指令作为兄弟范围不符合儿童指令的要求：“^父”设置

我遇到了问题AngularJS处理指令的transcluded作用域的方式。据了解，transclude的范围是其指令范围的一个兄弟姐妹，而不是一个孩子。 Shown here 角度transcluded指令作为兄弟范围不符合儿童指令的要求：“^父”设置

不过，我有一个孩子指令的情况：

<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 
      }; 
     } 
    }; 
}

如果有角的控制器，一个兄弟选择，将解决这一问题：

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

然而，这并不存在，所以我能做些什么？

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

来源

2014-05-14 parliament

从文档：“通过搜索ELEMENT的父级找到所需的控制器” - 范围无关紧要。 – zeroflagL

感谢您的评论。我试过这个，它似乎跳过了指令控制器并得到最近的父'ng-controller'。试过element.controller（）和每个可能的父项（parent（），parent（）。parent（）等）。更新OP – parliament

我的意思是说你的代码应该可以工作。你会得到什么错误？至于'element.parent（）.controller（）' - 它必须是'element.parent（）.control（'priceChart'）'。 – zeroflagL

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

而且事实上it does！

来源

2014-05-14 08:29:26 gkalpak

你说得对，实际上它是一个更高层次的父指令，通过使用“templateUrl”http://jsfiddle.net/hG2c7/5/导致该问题。这会导致该指令异步加载并中断父/子链接顺序，从而在其父项之前创建volumeIndicator链接，因此会丢失控制器。这在这个答案中描述得非常好http://stackoverflow.com/a/22081483/1267778 – parliament

不幸的是，templateUrl仍然加载异步，即使它包含在使用静态模板脚本标记中。我通过从父母开始一个事件来解决这个问题，当它完成加载并收听孩子上的事件以继续进行时。 – parliament

角度transcluded指令作为兄弟范围不符合儿童指令的要求：“^父”设置

回答

相关问题