Javascript AngularJS承诺在加载数据之前解析

在我的应用程序中，我必须在加载页面之前获取一些JSON数据并将其分配给数组。这是我使用CardService服务获取JSON的代码：

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

在控制器的解析块中，我有以下内容：

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

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

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

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

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

问题是，服务中的fetchCards函数似乎在将JSON数据分配给cards变量之前解决了这个问题。这会导致我的视图加载空白数据，直到我刷新了几次并获得了幸运

我可以确认延迟加载，因为当我在控制台中记录cards变量时，我在第122行得到一个空数组（当加载视图时），在第57行得到一个完整数组（当JSON调用成功时）。第57行的代码在加载视图后以某种方式执行

---

我该如何解决这个问题

我没有使用过

resolve

，但我会将其抛出，以防您遇到的问题与绑定到从服务返回的数组有关

如果要从服务返回

卡

数组并在UI中绑定到该数组，则可能需要尝试填充该数组，而不是设置

卡=数据（将使用未绑定到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;
      },

我不是同性恋，但我现在可以吻你！！！这解决了一切。非常感谢！至于加载数据之前的视图渲染问题，我意识到问题在于承诺是在哪里声明和解决/拒绝的。看看这把小提琴：
angular。复制（数据、卡片）
也可以。当一个目的地被提供给该方法时，它将首先删除目的地的元素，然后从源代码中复制新的元素。感谢Mark，我已将答案更新为包含角度。复制我以前从未使用过该元素！