Question

我有以下html / angular结构：

<div controller="one-controller">
   <div controller="two-controller">
      <div controller="three-controller">
         <div controller="four-controller">

         </div>
      </div>
   </div>
</div>

我想访问＆＃34; one-controller＆＃34;来自＆＃34;四控制器＆＃34;，我该怎么做。

我已经读过，通常所有子控制器都默认访问父控制器，但在我的情况下它不起作用。正如所读，我看到，对于一个级别，$ scope。$ parent ...将起作用，但在我的情况下，我如何访问顶级的。

我是否需要使用$ rootScope，或者还有其他任何方式。

Answer 1

在嵌套控制器之间发送消息的正确方法是使用$scope.broadcast和$scope.emit。具体而言，$broadcast在父子范围关系中向下移动，$emit向上移动。

因此，如果您想与one-controller内的four-controller进行沟通：

function one-controller($scope) {
  $scope.$on('myEvent', function(event, data) { console.log(data); });
  //Output will be ["apple","orange","banana"]
}

function four-controller($scope) {
  $scope.$emit('myEvent', ["apple","orange","banana"]);
}

如果你想向下沟通，请使用$broadcast：

function four-controller($scope) {
  $scope.$on('myEvent', function(event, data) { console.log(data); });
  //Output will be ["apple","orange","banana"]
}

function one-controller($scope) {
  $scope.$broadcast('myEvent', ["apple","orange","banana"]);
}

Answer 2

你当然可以这样做：

function topScope() {
    var scope = $scope;
    while (scope && scope.$parent !== $scope.$root) {
        scope = scope.$parent;
    }
    return scope;
}

示例：http://jsfiddle.net/aakwmhu8/1/

这样可以让你不必确切地知道要上升多少级别，但正如其他人所说，可能有更好的方法来完成你想要做的事情。我想说明确地访问其他控制器的范围应该尽可能少。

Answer 3

最好设计AngularJS应用程序，这样就不需要跨范围访问。如果您创建 scope-spaghetti ，则复杂性提升和可维护性会受到影响。

但如果你真的想这样做：正如你已经说过的那样你可以做到

$scope.$parent.$parent.$parent

你应该拥有你的级别控制器的范围。你也可以在你的顶级控制器中使用这样的$rootScope：

$rootScope.myTopLevelControllerScope = $scope;

现在您可以通过

从每个控制器访问此范围

$rootScope.myTopLevelControllerScope

但正如开头所说，这不是一个很好的架构。想想你是否能够以更好的方式实现你想要的东西，可能使用services或dependency injection这是AngularJS的强大功能。您也可以参考这个question，它有一些很好的参考资料，用于解释AngularJS中的服务，工厂和提供者。

Answer 4

默认情况下，子控制器可以访问父控制器，但您无法从子控制器更改父控制器中的primitive type，因此如果您想更改父控制器中的内容，请确保将数据保存在对象而不是字符串，例如

这不起作用

app.controller('parent', function ($scope) {
  $scope.foo = "test";
});

app.controller('child', function ($scope) {
  $scope.foo = "change"; //will not change the parent value
});

这将起作用

app.controller('parent', function ($scope) {
  $scope.data = {}
  $scope.data.foo = "test";
});

app.controller('child', function ($scope) {
  $scope.data.foo = "change"; //will change the parent value
});

angularjs - 访问Web应用程序中的顶级控制器范围

4 个答案: