Question

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

<filtergroup>
    <filter></filter>
</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;
    }
};}]);

我还在以下位置创建了该问题的简化Codepen：

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>

Angular JS - 使用带有嵌套自定义指令的ControllerAs

1 个答案: