从子控制器访问父控制器成员的优雅方式是什么？答案

【问题标题】：What's an elegant way of accessing parent controller's member from child controller?从子控制器访问父控制器成员的优雅方式是什么？
【发布时间】：2016-08-17 18:15:37
【问题描述】：

我在我的应用程序中使用 controllerAs 语法，我想从子控制器访问父控制器的功能，我知道这可以通过注入 $scope 来实现，但是考虑到 Angular 已经非常努力地从代码中删除 $scope，我想知道是否有更优雅的方法可以在不注入 $scope 的情况下执行此操作？

这是一个 HTML 示例：

<div ng-controller="AppCtrl as app">
  <div ng-controller="ChildCtrl as child">
  </div>
</div>

以及对应的控制器：

angular.module('test').controller('AppCtrl', function () {
  var vm = this;
  vm.log = function() {
    console.log("Output");
  }
}  

angular.module('test').controller('ChildCtrl', function () {
  var vm = this;
  // Here I want to access parent's log() function
}

我知道我可以注入 $scope 然后通过 $scope.app.log() 访问日志功能，但是有没有更好的方法来访问日志而不注入 $scope?

【问题讨论】：

angularjs Access parent scope from child controller的可能重复

标签： javascript angularjs

【解决方案1】：

一种选择是使用 Angular 1.5 组件 (docs)。

在子组件中看起来像这样：

.component('childComponent', {
  require: {
    parentCtrl: '^ parentCtrl'
  }
  controller: function() {
    this.parentCtrl.anyMethod(); //here we are accessing parent's controller properties
  }

  ...

});

【讨论】：

plunker 链接似乎已损坏。

【解决方案2】：

这个答案是在提出问题大约 6 个月后发布的，但我认为它可能有助于其他访问者检查我在下面提出的解决方案。

Angular 控制器具有原型继承，这意味着子控制器可以访问父控制器的 $scope 对象。如果不是将属性和方法绑定到$scope，而是使用this 关键字和controller as 语法，则子级$scope 将无法直接访问父级成员，但您仍然可以通过$scope.$parent 访问它们。

也就是说，有两种可能（干净且简单）的方法可以解决您的问题：

1) 您可以将属性和方法绑定到父控制器的 $scope 对象，并在任何子控制器中通过 $scope 直接访问它们（如果您愿意，可以覆盖属性/方法——就像您一样会定期Class)。所以如果你定义

$scope.log = function() { console.log("output") }

在您的父控制器上，您的子控制器只需调用$scope.log() 即可访问它。 Check this fiddle.

2) 或者，由于您使用 this 关键字和 controller as 语法将控制器绑定到视图，因此子对象的 $scope 对象将无法直接访问父对象的属性和方法，因为这些不是父级$scope 的成员，但this 的成员，父级控制器本身的实例。在这种情况下，您应该通过$scope.$parent 访问父级。除其他外，“app”（您为“AppCtrl”创建的别名，因此是该控制器本身的实例）将是$scope.$parent 的属性。由于您将“log”方法定义为控制器本身的成员而不是其$scope 对象，因此“log”是“app”的成员，您的子控制器可以访问父级的“log”方法：@987654343 @。 Check this fiddle

这里有一些关于这个主题的进一步阅读：https://github.com/angular/angular.js/wiki/Understanding-Scopes

【讨论】：