Angularjs - 添加新的创建数据后结果不会更新

Question

我知道这里有人问过这个问题，但我仍然被这个问题所困扰，在我将新数据添加到数据库后结果没有更新。

我有一个控制器用于添加和检索数据

.controller('GameCtrl', ['$scope', function(scope) {

  scope.createGame = function() {    
   Api.createGame(postData).then(function(result) {
     console.log(result);
     scope.$broadcast("event: list updated", true);
   }, function(result) {
    console.log(result.data.message);
    scope.showError = true;
    scope.data = 'Warning! '+result.data.message;
   });
  }; 



  var quizmaster = {};

  quizmaster.gameList = function() {
    Api.getGameList().then(function(result) {
      console.log(result.data);
      scope.games = [];
      scope.games = result.data;
    }, function(result) {
     console.log(result);
     });
  };

  scope.$on("event: list updated", function(value) {
    console.log('event update');
    quizmaster.gameList();
  });


}]);

广播事件工作正常，添加后调用 quizmaster.gameList() 函数加载游戏列表。控制台中显示的数据未更新，新创建的数据尚不存在。但是当我查看我的数据库时，新添加的数据已经存储了。它只需要刷新页面即可更新列表。在不刷新页面的情况下如何在视图中体现添加的数据？

感谢您的帮助！

更新：Api.getGameList() 是一项服务。

.factory('Api', function($http) {
  return {
    getGameList: function(params) {
      return $http({
        method  : 'GET',
        url     : api + 'games/list',
        params  : params,
        headers : {'X-GameApp-Token' : credential.token}
      });
    }
  }
});

Answer 1

什么是 Api.getGameList()？如果它是在 Angular 之外完成的（即 then() 不是来自 $http 承诺），那么您必须通知 Angular 您的更改。在$scope.apply() 中设置数据：

$scope.$apply(function() {
    scope.games = result.data;
});