Angularjs 如何从嵌套组件的父组件访问其控制器？

我有三个角度1.5组件：

ReportFilter

和

ClientSelect

，

ZoneSelect

ReportFilter包含两个组件

<!-- Report Filter -->
<div>
    <client-select client="$ctrl.selections.client"></client-select>
    <zone-select zone="$ctrl.selections.zone"></zone-select>
    <button ng-click="$ctrl.search()">Get Report</button>
    <button ng-click="$ctrl.clear()">Clear</button>
</div>

得到报告
清楚的

客户端

和

区域

是双向数据绑定，因此当用户选择客户端或区域时，在my

ReportFilter

的选择中更新相应的属性

我的问题：

如何在

ClientSelect

或

ZoneSelect

组件的控制器上调用

ReportFilter

控制器内部的

reset（）

方法

---

React有一个

ref

标记，允许您访问控制器以调用其上的方法。

我认为首选方法是在您的子指令中添加一个称为api的范围属性：

app.directive('childDirective', function() {
  return {
    scope: {
      api: "=?"
    },
    link: function(scope, elem, attrs) {
      return {
        scope.someFN = function() {
           // do stuff.
        };

        scope.api = {
         someFN: scope.someFN
        };
      };
    };
  };
});

然后，在调用指令时，只需传递一个scope属性：

<div ng-controller="parentCtrl">
  <child-directive api="foo"></child-directive>
</div>

没有内置的方式（不像您提到的React：）

一个可能的解决方案是让孩子们要求他们的父母，并向父母注册：

    // child directive
    .directive('clientSelect', function() { // `.component` is similar...
        return {
            ...
            controller: ClientSelect,
            require: ['clientSelect', 'reportFilter'],
            link: function(scope, elem, attrs, ctrls) {
                ctrls[1].setClientSelect(ctrls[0]);
                // do not forget to deregister, just in case
                scope.$on('$destroy', function() {
                    ctrls[1].setClientSelect(null);
                });
            }
        };
    })

    // parent directive
    .directive('reportFilter', function() {
        function ReportFilter() {
            ...
        }

        ReportFilter.prototype.setClientSelect = function(clientSelect) {
            this.clientSelect = clientSelect;
        };

        ReportFilter.prototype.somethingElse = function() {
            // reset the clientSelect:
            this.clientSelect.reset();
        };

        return {
            ...
            controller: ReportFilter,
            ...
        };
    })

如果您不希望子组件和父组件之间存在耦合，那么您可以重新设计子组件，使其所有数据，我的意思是所有，整个内容，都来自其父组件。在这种情况下，要重置

客户端选择

，父控制器只需清除与之共享的数据，即执行以下操作：

// in the parent controller
this.selections.client = {}; // or null or...

---

我喜欢这种方法，除了指令现在依赖于特定的控制器这一事实。如果指令是独立的组件，这种耦合确实很糟糕。然而，如果他们打算从可用性的角度合作，情况就不是这样了。例如，树中的节点始终是。。。树。要求它们的父“树”组件不会导致任何更多的耦合。这个想法可以奏效，但是我计划在

ReportFilter

@sflogen之外的其他地方使用

clientSelect

和

reportFiler

组件。请记住，如果parentController和childController具有交错依赖关系，那么这种方法是最好的方法。在我正在从事的一个项目中，我们在父/子关系中使用这种方法，子对象需要来自父对象的变量和共享函数，父对象需要访问子对象的API。我见过其他几个组件（如UI网格）也可以使用这种方法。我注意到一些库中有一些奇怪的行为。。。例如，angular-nvd3通常要求您提供一个on ready函数来实际填充范围变量。我不确定这是否是预期的行为，但是因为angular-nvd3还允许您定义api，但除非您在on ready函数中这样做，否则它似乎不会实际填充变量。

// in the parent controller
this.selections.client = {}; // or null or...