Angularjs - 当新创建的数据已经被添加结果没有更新 [英] Angularjs - Result is not updating when new create data has been added

问题描述

我知道它在这里已经问过，但我仍然受阻这个问题，其中我添加了一个新的数据之后对数据库的结果没有更新。

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

  .controller（'GameCtrl'，['$范围，功能（适用范围）{  scope.createGame =功能（）{
   Api.createGame（POSTDATA）。然后（功能（结果）{
     的console.log（结果）;
     范围$广播（事件：列表更新，真正的）;
   }，功能（结果）{
    的console.log（result.data.message）;
    scope.showError = TRUE;
    scope.data ='警告！ '+ result.data.message;
   }）;
  };  变种quizmaster = {};  quizmaster.gameList =功能（）{
    Api.getGameList（）。然后（功能（结果）{
      的console.log（result.data）;
      scope.games = [];
      scope.games = result.data;
    }，功能（结果）{
     的console.log（结果）;
     }）;
  };  。关于适用范围（事件：列表更新$，功能（价值）{
    的console.log（'事件更新'）;
    quizmaster.gameList（）;
  }）;
}]）;
 

广播事件工作正常，并添加后称为quizmaster.gameList（）函数来加载游戏列表。显示在控制台中的数据不会被更新，新创建的数据现在还没有。但是，当我看看我的数据库，新增加的数据已经存储。它仅仅需要刷新页面来更新列表。我们怎样才能反映在视图中添加的数据而无需刷新页面？

感谢您的帮助！

更新：Api.getGameList（）是一个服务

  .factory（阿比'，函数（$ HTTP）{
  返回{
    getGameList：功能（PARAMS）{
      返回$ HTTP（{
        方法：GET，
        网址：API +'游戏/列表'，
        params：一个参数，可以
        标题：{'X-GameApp令牌：credential.token}
      }）;
    }
  }
}）;
 

解决方案

什么是Api.getGameList（）？如果是角之外完成的（即当时的（）是不是从$ HTTP的承诺），那么你必须通知角的更改。裹在设置数据的 $ scope.apply（）：

  $范围。$应用（函数（）{
    scope.games = result.data;
}）;
 

I know it have been asked here, but I'm still blocked with this issue where the result are not updating after i added a new data to the database.

I have one controller for adding and retrieving data

.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();
  });


}]);

The broadcast event works fine and called the quizmaster.gameList() function to loads the game list after adding. The data that shows in the console is not updated and new created data isn't there yet. But when i take a look at my database, the newly added data is already stored. It just need to refresh the page to update the the lists. How can we reflect the added data in the view without refreshing the page?

Thanks for the help!

Update: Api.getGameList() is a service.

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

解决方案

What is Api.getGameList()? If it is done outside of angular (i.e. the then() isn't from an $http promise) then you have to notify angular of your changes. Wrap setting the data in a $scope.apply():

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

这篇关于Angularjs - 当新创建的数据已经被添加结果没有更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！