AngularJS: 多个视图中的范围未更新

Question

我有一个控制器和两个视图。

ClustersContorller

angular.module('app.controllers').controller('ClustersController', [
  '$scope', 'ClustersService', function($scope, ClustersService) {
    ClustersService.getAll().success(function(data) {
      $scope.clusters = data;
    });
    $scope.$on('cluster:added', function(event, data) {
      ClustersService.createNew(data).then(
        function(res) {
          $scope.clusters.push(res.data);
        },
        function(res) {
          console.log( 'Unable to create a cluster!' );
        }
      );
    });
  }
]);

现在，当我发送 HTTP 请求并通过推送到 $scope.clusters 更新范围变量时，一个视图运行良好：

<section class="clusters">
    <h2 ng-show="clusters.length < 1">You have no clusters :(</h2>
  <a class="btn btn-default btn-block" data-ng-repeat="cluster in clusters" data-template="{{cluster.templateId}}">
    <h2> {{ cluster.name }} </h2>
    <p> {{ cluster.description }} </p>
  </a>
    <add-cluster-modal></add-cluster-modal>
</section>

但是与此控制器绑定的另一个视图不会在绑定中更新 scope.clusters：

<ul class="dropdown-menu" role="menu" data-ng-controller="ClustersController">
  <li data-ng-repeat="cluster in clusters">
    <a> {{cluster.name}} </a>
  </li>
</ul>

需要说明的是，第一个视图受 $routeProvider 约束，第二个视图是 ng-include=" 'templates/partials/header.html' "[直接包含在应用主 html 文件中的模板的一部分

如果有什么令人困惑的地方，请随时问我...

Answer 1

Angular 控制器不是单例，每次在视图中使用 ng-controller 时，都会创建该控制器的一个新实例（参见 documentation）。这就是为什么您的第二个控制器不显示数据的原因 - 它的范围不知道其他实例的范围。

您可以将模型的数据保存在 $rootScope 下，或者在您的控制器中创建一些事件机制，通知其他实例数据更改。

AngularJS: 多个视图中的范围未更新

AngularJS: Scope in multiple views not updating

html

javascript

data-binding

angularjs