javascript - AJAX 后 $scope.variable 未更改

Question

我正在进行 ajax 调用以从服务器获取一些信息，然后更新屏幕上的列表。信息正在返回，但范围没有更新!我尝试过使用 $apply()，但只收到错误

代码如下所示:

在正确的 Controller 内，以 HTML 格式:

<div ng-controller=controller_1>
  <div ng-controller=controller_2>

    <button ng-click="myfunction()">click</button>

  </div>
</div>

在 Angular controller_1 中，我们定义了 $scope.vendorsarray

在 Angular controller_2中，注入(inject)$scope，我们有

$scope.function = function(){

  Factory.ajaxfactoryAction($scope.itemsarray).success(function(data, status, headers, config) {
    $scope.vendorsarray = data

    // POINT A
  }

// POINT B

}

现在，如果我在 A 点和 B 点执行 console.log($scope.vendorsarray) (首先触发，因为它不必等待 ajax) ，我得到了旧的vendorsarray。在 A 处，我得到了新的、正确的 vendorsarray。但浏览器中的 vendorsarray 仍然没有更新!这是怎么回事？

感谢您的帮助。

编辑

这是我尝试实现 $apply() 的方法:

$scope.function = function(){

  Factory.ajaxfactoryAction($scope.itemsarray).success(function(data, status, headers, config) {
    $scope.vendorsarray = data

    var temp = $scope.vendorsarray

    $scope.$apply(function() {
      $scope.vendorsarray = temp;
    });
  }

}

这是错误(在控制台中):

https://docs.angularjs.org/error/ $rootScope/inprog?p0=$digest

Error: error:inprog
Action Already In Progress
$digest already in progress

Answer 1

But then vendorsarray still isn't updated in the browser! What's going on?

这里的问题(简单来说)是每个 Controller 都有自己的 $scope.vendorsarray 副本。

您可以使用 service在两个 Controller 之间共享数据模型。 Angular 服务是单例。每个依赖于服务的组件都会获得对服务工厂生成的单个实例的引用。

以下示例显示了该解决方案的基本结构:

var app = angular.module('module', [])

.factory('shared', function() {
    var shared = {
      "data": [],
      "counter": 0
    };
    return shared;
  })

.controller('Ctrl1', ['$scope', 'shared',
  function($scope, shared) {
    $scope.shared = shared;
    $scope.add = function() {
      $scope.shared.data.push("Item " + $scope.shared.counter++);
    }
  }
])

.controller('Ctrl2', ['$scope', 'shared',
  function($scope, shared) {
    $scope.shared = shared;
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="module">
  <div ng-controller="Ctrl1">
    CONTROLLER 1
    <button ng-click="add()">ADD</button>
  </div>
  <div ng-controller="Ctrl2">
    CONTROLLER 2
    <ul>
      <li ng-repeat="item in shared.data">{{item}}</li>
    </ul>
  </div>
</div>

相关:

• What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
• Sharing model between controllers