Angular JS - 使用ControllerAs和嵌套自定义指令

Question

正如标题所示，我在使用嵌套自定义指令的Angular项目上遇到了一些问题。我正在创建一个界面，允许用户通过点击复选框来过滤搜索结果的JSON订阅源。 该指令模板的层次结构如下：

<filtergroup> 
    <filter></filter> 
</filtergroup> 

我似乎能够访问模板里的filtergroup指令的控制器定义的变量为filtergroup。但是我不能从孩子指令中访问相同的变量，尽管使用

require: '^filtergroup' 

下面是我的指令：

.directive('filtergroup', [function(){ 
return{ 
    restrict: 'E', 
    transclude: true, 
    scope: { }, 
    template: '<div><ng-transclude></ng-transclude>{{filtergroup.variable}}</div>', 
    bindToController: true, 
    controllerAs: 'filtergroup', 
    replace: true, 
    controller: function() { 
     var self = this; 
      self.variable = "blah"; 
    } 
};}]) 

.directive('filter', [function(){ 
return { 
    restrict: 'E', 
    template: '<div>{{filtergroup.variable}}</div>', 
    require: '^filtergroup', 
     scope: {}, 
    link: function(scope, elem, attr, filtergroupCtrl){ 
     scope.active = false; 
    } 
};}]); 

我还创建了问题的简化Code​​pen在：

http://codepen.io/decodedcreative/pen/NrNqXm

任何帮助将是伟大的，因为这是让我疯了！谢谢

Answer 1

通过说require: '^filtergroup'你只是要求注入filtergroup的控制器的链接功能。那么这取决于你如何使用它。

在你的情况，你可以添加一个filtergroupCtrl的参考filter的范围：

.directive('filter', [function(){ 
    return { 
     // ... 
     template: '<div>{{filtergroup.variable}}</div>', 
     link: function(scope, elem, attr, filtergroupCtrl){ 
      scope.filtergroup = filtergroupCtrl; 
      // ... 
     } 
    }; 
}]); 

这样你就可以访问它在孩子的模板，你尝试的方式要做到这一点：

<div>{{filtergroup.variable}}</div>