访问父控制器 n 级更高

Question

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

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

我在我的模板中使用 controllerAs 语法（MyCtrl 作为主要）所以我只在我的模板中使用 main.name 来访问名称。一切顺利。

在我的模板中，我有一堆创建新范围的嵌套指令，在底部的某个地方我有一个 ng=controller="SubCtrl as subController"。我现在可以通过 subcontroller.property 访问子控制器上的属性，并且在该模板中我仍然可以访问 main.name 因为控制器太棒了。

问题在于，在我的第二个控制器代码中，我需要访问父控制器中的内容，此时父控制器的深度为 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;
}]);

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

访问父控制器 n 级更高

Access parent controller n levels higher

javascript

angularjs

scope

angular-controller