AngularJS承諾在加載數據之前得到解決

Question

在我的應用程序中，我必須獲取一些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();
}

問題是，服務中的fetchCards函數似乎在將JSON數據分配給cards變量之前解析了promise。 這導致我的視​​圖加載空白數據，直到我刷新幾次並獲得幸運。

我可以確認延遲加載，因為當我在控制台中記錄卡片變量時，我在第122行（當我的視圖加載時）得到一個空數組，在第57行得到一個完整數組（當JSON調用成功時）。 第57行代碼在加載視圖后以某種方式執行。

我該如何解決？

Answer 1

我沒有使用過resolve但是我把它丟棄在那里以防你遇到的問題與綁定到服務返回的數組有關。

如果您從服務返回您的cards陣列並在UI中綁定它，您可能想要嘗試填充相同的陣列而不是設置cards = data; （它將使用未綁定到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;
      },

請看這個小提琴，找一個我想要描述的實例。 多次單擊第一個按鈕將更新視圖，但是一旦單擊第二個按鈕，綁定將被破壞。

兩者的主要區別是：

1. 第一個按鈕使用data.length = 0和data.push()來保留原始數組的引用
2. 第二個按鈕使用data = newArray用新的按鈕覆蓋原始data數組引用

---

更新：另外，正如Mark Rajcok所提到的，你可以使用angular.copy來保留原始數組的引用，將其清空並從源代碼中添加新的數組，如下所示：

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