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' "

直接包含在app主html文件中的模板的一部分

请随时问我是否有疑惑......

Answer 1

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

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

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

1 个答案: