Question

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

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

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

在我的模板中，我有一堆嵌套的指令，它们创建了新的作用域，而在底部的某处，我有一个 ng = controller =“SubCtrl as subController”。我现在可以通过 subcontroller.property 访问子控制器上的属性，并且在该模板中我仍然可以访问 main.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;
}]);

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

访问父控制器n级别更高

1 个答案: