Question

我在我的控制器中有以下设置，我希望能够适当地更新我的视图，但直到我刷新页面才会这样：

var vm = this;
var loadingGames = $q.defer();

var getGames = function() {
  playersService.getGames({
    playerId: playerId
  }).$promise.then(function(data) {
    vm.games = data;
    loadingGames.resolve();
  });
};

var init = function() {
  getGames();
}

init();

var updateSchedule = function() {
  getGames();
  loadingGames.promise.then(function() {
    populateOptions(vm.games);
    vm.tableParams.reload();
  });
};

vm.performAction = function(action, gameId, gameType) {
  utilitiesService.performOperation(action, gameId, gameType).then(
    function() {
      updateSchedule();
    },
    function(httpError) {
      alert('Couldn\'t '+ action +' game: ' + httpError);
    });
};

var populateOptions = function(games) {
  angular.forEach(games, function(game) {
    game.options = getOptions(game);
  });
};

当我点击我的用户界面中的performAction按钮时，我希望在我的视图中看到更新的vm.games。但是，我总是需要刷新页面才能看到更改。我知道这很可能与$scope.$apply有关，但我现在还没有抓住它。

Answer 1

错误是你的loadingGames变量。您只实例化一次，并尝试多次解决它。当您从init函数首先调用它时，您可以解决它。因此，对loadingGames的所有后续调用都不会等待，因为promise已经解决了。因此他们使用旧的vm.games。

要解决此问题，只需从您的playerService返回承诺即可。您可以链接承诺，这意味着通过让实际的然后从您的服务返回承诺，vm.games =数据将在下一个代码之前执行。因此，您将从其他函数调用getGames.then（...）。

查看未按预期更新

1 个答案: