访问更高级别的父控制器

Question

我有一个页面控制器，在这里简化

angular.module('app').controller('MyCtrl', function () {
    this.name = 'David'
});

我在我的模板中使用了 controllerAs 语法（MyCtrl 作为 main），所以我只在我的模板中使用 ma​​in.name 来访问名称。都很好。

在我的模板中，我有一堆嵌套指令，它们创建了新的作用域，在底部的某处我有一个 ng=controller="SubCtrl as subController"。我现在可以通过 subcontroller.property 访问子控制器上的属性，并且在该模板中我仍然可以访问 ma​​in.name 因为 controllerAs 很棒。

问题在于，在我的第二个控制器代码中，我需要访问父控制器中的内容，此时父控制器的深度为 n 级。我知道我可以在主控制器中这样做......

$scope.main = this;

然后在第二个控制器中执行此操作

var main = $scope.$parent.$parent.$parent.$parent.main;

但我们都知道我们不应该这样做，而且我也不知道它有多深，因为我不知道开发人员在其中放置了多少指令来创建新范围。

我听到一些人在谈论为此创建一个服务，但这听起来很难通用，我不希望我的框架的用户每次将包含放入标签面板，那太疯狂了。

所以，我目前的想法是使用作用域并编写一个函数，该函数将遍历父作用域，直到找到您使用比较函数指定的作用域。不过我觉得可能有更好的方法。

Answer 1

那么为什么不创建一个服务呢？服务是存储数据或访问多个控制器、指令、工厂等所需内容的好地方。它基本上是一个单例，你在多个地方注入，但它总是被注入同一个实例，并且只在第一次需要它时创建。它非常易于使用，并且比您想象的 ($parent.$parent.n.....data) 要少得多。如果您进行单元测试，它也更易于测试。

var module = angular.module('app');

module.service('commonService', function () {
    this.sharedData = {name: ''};
});

// assume this gets loaded first
module.controller('MyCtrl1', ['commonService', function (commonService) {
    commonService.sharedData.name = 'David'
}]);

// and this is loaded somewhere after MyCtrl2
module.controller('MyCtrl2', ['commonService', function (commonService) {
    var name = commonService.sharedData.name;
}]);

我还没有验证语法，但这是基本结构，非常简单。