javascript - 为什么 $scope.$apply 需要更新这个数组

Question

我正在使用 Angular 1.5.9 和 angular-route 1.5.9。我有一个可行的解决方案，但我需要 $scope.$apply() 来更新 DOM 对我来说没有意义。

我正在使用工厂和 Controller 来更新在 ng-repeat 中使用的数组。我知道摘要循环没有被触发，这就是我需要使用 $scope.apply() 的原因，但我不明白为什么。这是失败的代码:

myApp.controller('MyGamesController', ['$http', '$firebaseAuth', 'DataFactory', '$scope', function ($http, $firebaseAuth, DataFactory, $scope) {
  console.log('mygamescontroller running');
  var self = this;
  self.newGame = {}
  self.games = [];

  getGames();

  function getGames() {
        DataFactory.getGames().then(function (response) {
          console.log('returned to controller from factory', response); // logs the correct response including lastest data, but DOM doesn't update
          self.games = response; // self.games is correctly set, but not updated on the DOM
          $scope.$apply(); // Updates the DOM 
        });
  } //end getgames function


  self.addGame = function () {
    DataFactory.addGame(self.newGame).then(getGames);
  }

}]); //end controller

Angular Router 正在像这样处理我的 controllerAs:

  .when('/mygames' ,{
    templateUrl: '/views/templates/mygames.html',
    controller: 'MyGamesController',
    controllerAs: 'mygames'
  })

HTML 的 ng-repeat 部分的 HTML 如下所示:

  <tbody>
    <tr ng-repeat="game in mygames.games">
      <td>{{game.game}}</td>
      <td>{{game.number_players}}</td>
      <td>{{game.time_to_play}}</td>
      <td>{{game.expansion}}</td>
    </tr>
  </tbody>

顺便说一句，我确实尝试清除 self.games 数组并创建一个循环来插入每个游戏，但这并没有解决问题。我仍然需要 $scope.$apply() 来更新 DOM。

如果有帮助，我可以在这里找到完整的 repo 协议(protocol)(链接特定的提交):https://github.com/LukeSchlangen/solo_project/tree/df72ccc298524c5f5a7e63f4a0f9c303b395bafa

Answer 1

Angular 不会监视此处的更改，因为此代码的执行不在 Angular 的权限范围内。让 Angular 监视 promise 结果的最简单方法是使用 $q 库。

function getGames() {  
    return $q.resolve(DataFactory.getGames().then(function (response) {
      self.games = response; // self.games is correctly set, but not updated on the DOM
    }));
} //end getgames function

$q promise 由 Angular 管理，它期望在 $q promise 解析时运行摘要周期。

您还需要将 $q 包含并注入(inject)到您的 Controller 中。

myApp.controller('MyGamesController', ['$q', '$http', '$firebaseAuth', 'DataFactory', '$scope', function ($q, $http, $firebaseAuth, DataFactory, $scope) {

这篇优秀的文章详细介绍了异步调用如何与摘要循环一起工作: How do I use $scope.$watch and $scope.$apply in AngularJS?