之前数据加载AngularJS承诺解决 [英] AngularJS promise is resolved before data is loaded

问题描述

在我的应用程序，我要取一些JSON数据，并在页面加载之前分配到一个数组。这是我的$ C $下获取使用CardService服务的JSON：

In my app, I have to fetch some JSON data and assign it to an array before the page is loaded. This is my code for fetching the JSON using the CardService service:

cards = [];

var cs = {
...
fetchCards: function() {
      var d = $q.defer();
      $http.get("data/cards.php").success(function(data) {
                      cards = data;
                      d.resolve();
                }).error(function(data, status) {
                      d.reject(status);        
                 });
               return d.promise;
      },
getCards: function() { return cards; };
...
}

在控制器的决心块，我有以下几点：

In the controller's resolve block, I have the following:

WalletController.resolve = {
        getCards: function(CardService) {
                CardService.fetchCards().then(loadView, showError);
        }
}

而在实际控制人，我有以下几点：

And in the actual controller, I have the following:

function WalletController($scope, CardService) {
    $scope.cards = CardService.getCards();
}

现在的问题是，在服务fetchCards功能似乎解决的承诺之前，JSON数据被分配到卡的变量。这导致了我的看法装载空白数据，直到我刷新几次，并得到幸运。

The problem is, the fetchCards function in the service seems to resolve the promise before the JSON data is assigned to the cards variable. This leads to my view loading with blank data until I refresh a couple times and get lucky.

我可以证实后期加载，当我在控制台登录卡变量，我得到的第122行（当我的观点被加载）的空数组，并在57行全阵列（当JSON调用成功） 。 57号线的code以某种方式执行的在的加载视图。

I can confirm the late loading as when I log the cards variable in the console, I get an empty array at line 122 (when my view is loaded) and a full array at line 57 (when the JSON call is successful). Line 57's code somehow executes after the view is loaded.

我该如何解决这个问题？

How do I fix this?

推荐答案

我没有用解析但我以防万一的问题，你扔了这一点，有都具有涉及结合从一个服务返回的阵列

I haven't used resolve but I'm throwing this out there just in case the issue you are having is related to binding to an array returned from a service.

如果您正在返回的卡阵列从一个服务，并在用户界面绑定到它，你可能要尝试填充，而不是设置<$ C $同一阵列C>卡=数据; （将覆盖与新阵列未绑定到用户界面的本地卡）

If you are returning your cards array from a service and binding to it in the UI you may want to try to populate that same array instead of setting cards = data; (which will overwrite the local cards with a new array which is not bound to the UI).

是这样的：

fetchCards: function() {
      var d = $q.defer();
      $http.get("data/cards.php").success(function(data) {
                      cards.length = 0;
                      for(var i = 0; i < data.length; i++){
                          cards.push(data[i]);
                      }
                      d.resolve();
                }).error(function(data, status) {
                      d.reject(status);        
                 });
               return d.promise;
      },

请参阅这种提琴对于什么，我试图描述一个工作的例子。点击第一个按钮多次将更新视图，但一旦你点击第二个按钮的结合将被打破。

See this fiddle for a working example of what I'm trying to describe. Clicking the first button multiple times will update the view but once you click on the second button the binding will be broken.

这两者之间的主要区别是：

The main difference between the two is:

1. 在第一个按钮，使用 data.length = 0 和 data.push（）保留原始数组的引用
2. 第二个按钮会覆盖原有的数据用一个新的使用数据数组引用= newArray

1. First button uses data.length = 0 and data.push() to retain the original array's reference
2. Second button overwrites the original data array reference with a new one using data = newArray

更新：同时，马克Rajcok，提到下面你可以使用 angular.copy 被清空出来，并增加新的从源头上像这样保留原始阵列的参考：

---

Update: Also, as Mark Rajcok, mentioned below you can use angular.copy to retain the original array's reference by emptying it out and adding new ones from the source like this:

fetchCards: function() {
      var d = $q.defer();
      $http.get("data/cards.php").success(function(data) {
                      angular.copy(data, cards);
                      d.resolve();
                }).error(function(data, status) {
                      d.reject(status);        
                 });
               return d.promise;
      },

这篇关于之前数据加载AngularJS承诺解决的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！