Question

我对AngularJS处理指令的transcluded范围的方式存在问题。众所周知，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并跳过指令控制器。

Answer 1

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

确实 it does ！

Angular transcluded指令作为兄弟范围与child指令的要求不兼容：“^ parent”设置

1 个答案: