AngularJS söz veri yüklenmeden önce çözüldü

Question

Uygulamamda, bazı JSON verilerini getirip sayfa yüklenmeden önce bir diziye atamam gerekiyor.

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

Ve gerçek denetleyicisi, şu var: Ben şu var kontrolörün çözmek bloğunda

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

: Bu Cardservice hizmetini kullanarak JSON getirilirken benim kodudur

Sorun, hizmetteki fetchCards işlevinin, JSON verilerinin kart değişkenine atanmasından önce vaat edilen çözümü çözdüğü görülüyor. Bu, birkaç kez yenilenip şanslı hale gelene kadar boş verilerle yükleme yüklememe yol açar.

Konsolda kart değişkenini günlüğe kaydettiğimde olduğu gibi geç yüklemeyi onaylayabilirim, satır 122'de (görünümüm yüklendiğinde) boş bir dizi ve satır 57'deki bir tam dizi (JSON çağrısı başarılı olduğunda)). Satır 57'nin kodu, görünümü yüklendikten sonra bir şekilde 'u çalıştırır.

Bunu nasıl düzeltirim?

Answer 1

resolve kullanmıyorum, ancak bunu yaptığınız sorunun yalnızca bir hizmetten döndürülen bir diziye bağlanmasıyla ilgili olması durumunda bunu atıyorum. Eğer bir hizmetten cards dizi dönen ve kullanıcı arayüzünde kendisine bağlanmasını ise

yerine cards = data; ayar aynı diziyi yerleştirmek için denemek isteyebilirsiniz (ciltli olmayan yeni bir dizi yerel kartları üzerine yazar hangi UI'ye). gibi

şey:

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

Ben tarif etmek ne çalışıyorum, bir çalışma örneği için this fiddle bakınız. İlk tuşa birden çok kez tıklamak görünümü güncelleyecektir, ancak ikinci düğmeye bastığınızda ciltleme bozulacaktır.

ikisi arasındaki ana fark vardır:

1. Birinci düğme orijinal dizinin referansı korumak için data.length = 0 ve data.push() kullanan
2. ikinci düğmesini kullanarak yeni bir orijinal data dizi referans üzerine yazar
data = newArray

---

Güncelleme: Ayrıca dışarı boşaltılması ve bunun gibi bir kaynaktan yenilerini ekleyerek orijinal dizinin başvuruyu korumasına angular.copy kullanabilirsiniz size aşağıda belirtilen Mark Rajcok gibi:

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