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變量之前的承諾。這導致我的視​​圖加載空白數據，直到我刷新幾次，幸運。

我可以確認後期加載，因爲當我在控制檯中記錄卡變量時，我在第122行（當我的視圖被加載時）獲得一個空數組，並且第57行的一個完整數組（當JSON調用成功）。第57行的代碼以某種方式在之後執行視圖被加載。

我該如何解決這個問題？

Answer 1

我還沒有使用過resolve，但我正在拋出它，以防萬一您遇到的問題與綁定到從服務返回的數組有關。

如果您要從服務中返回cards陣列並將其綁定到UI中，您可能需要嘗試填充相同的陣列而不是設置cards = data;（它將用未綁定的新陣列覆蓋本地卡到用戶界面）。

喜歡的東西：

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

爲了什麼，我試圖描述一個工作示例見this fiddle。多次單擊第一個按鈕將更新視圖，但是一旦您單擊第二個按鈕，綁定就會被破壞。

兩者之間的主要區別是：

1. 首先按鈕使用data.length = 0和data.push()保留原始陣列的參考
2. 第二個按鈕覆蓋使用一個新的原始data陣列基準data = newArray

---

更新：此外，馬克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; 
     },