2015-11-21 23 views
6

Bu yüzden, sunucuda, sayfa yüklendiğinde ng-yinelemek istediğim bir nesne koleksiyonum var.

Ben, sunucudaki bir kaynaktan liste getirilen bir fabrika yapılmış şöyle olmuştu

:

app.factory('objectArray', ['$http', function($http) { 
     // This is returning a $$state object 
     // instead of response.data... 
     return $http.post('/get_collection').then(function(response) { 
      console.log(response.data); 
      return response.data; 
     }); 
    }]); 

Ben ui-yönlendirici ve kararlılık özelliğini kullanırken önce bu kod işi yaşadım durum beyanı. Ancak bu fabrikayı doğrudan denetleyiciye enjekte ederken, response.data almak yerine bir $$ durum nesnesini alıyorum.

Benim kontrolör şöyle görünür:

app.controller('applicationController', ['$scope', 'objectArray', function($scope, objectArray) { 
    $scope.array = objectArray; 
    console.log($scope.array); 
}]); 
+0

Olası kopyalar ?] (http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call); (bkz. [bu çoğaltıcı] (http://stackoverflow.com/questions/22951208/return-value-after-a-promise) aswell) – Kenney

+0

@Kenney En çok merak ettiğim şey budur. ek kod, ancak bu durumda {$$ state: object} var –

+0

emin değilim, ama ['Promise.then'] 'den değerleri döndüremezsiniz (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referans/Global_Objects/Promise/sonra). Yaklaşımınız bu gibi bir şey miydi (https://github.com/angular-ui/ui-router/issues/77)? – Kenney

cevap

8

$ http hizmet döndürür (ve dolayısıyla objectArray hizmettir) bir söz denir ne.

objectArray.then(function(data) { 
    $scope.array = data; 
}); 

doğrudan erişime sahip nedeni: http isteğine yanıt sunucuya geri geldiğinde veriler, yani kullanılabilir olduğunda çağrılacak bir geri çağırma işlevi kaydederek fiili verilere erişebilir Çözünürlüğü kullanırken veriye, çözüm işlevi bir söz verdiğinde yönlendiricinin çözülmesi gereken sözü beklemesidir. Ve ancak o zaman, verileri vaatten çıkarır ve verileri denetleyiciye enjekte eder.

daha iyi the following article okuyabiliyordu, sözlerini anlamaya (ve sequel) belirleyin.

3

@JB Nizet fark gibi, size kod iyidir, sadece burada demo çalışıyor denetleyicisi bunu çözmek

angular.module('app', []); 
 
angular.module('app').factory('objectArray', ['$http', function($http) { 
 
    // This is returning a $$state object 
 
    // instead of response.data... 
 
    ////// changed request type and url for the sake of example 
 
    return $http.get('http://jsonplaceholder.typicode.com/posts/1') 
 
.then(function(response) { 
 
    console.log(response.data); 
 
    return response.data; 
 
}); 
 
}]); 
 
angular.module('app').controller('applicationController', ['$scope', 'objectArray', function($scope, objectArray) { 
 
    //////resolve it here 
 
    objectArray.then(function(successResponse){ 
 
    $scope.array = successResponse; 
 
    console.log($scope.array); 
 
    }); 
 
}]); 
 
angular.bootstrap(document.body, ['app']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-controller="applicationController"> 
 
    <h5>Hello {{array.title}}</h5> 
 
</div>

Ben bir zaman uyumsuz çağrısından yanıtı dönmek nasıl [ait
+1

HTTP yanıtı yerine veri vaadini (vaat zincirleme yoluyla) vermek aslında iyi bir şeydir. OP'nin fabrikası gayet iyi. –

+0

Ve ikinci örneğiniz kötü bir fikir: Artık arayanın http isteği başarısız olduğunda/olup olmadığını bilmenin bir yolu yok. Ayrıca http://blog.ninja-squad.com/2015/05/28/angularjs-promises/ –

+0

@JBNizet'i de okumalısınız. 2 örnekte 2 tane geri arama yapılması gerektiğini, ayrıca güncellenmiş cevabın da doğru olduğunu biliyorsunuz. gerçekten –

İlgili konular