サーバーからデータを取得するサービスを作成しました。ブラウザツールは、データが正しく取得されたことを確認します。angular.jsサービスのデータをコントローラに含めるにはどうすればいいですか?
angular.
module('karassApp').
factory('Person', ['$rootScope', '$http', function($rootScope, $http){
var persons = [];
var loaded = false;
// returns a promise that resolves to the persons.
var load = function(){
return $http.get('/get_persons').then(function(response){
persons = response.data.map(function(person){
return {
id: person.id,
fullname: person.fullname,
birthdate: person.birthdate ? new Date(person.birthdate) : null,
deathdate: person.deathdate ? new Date(person.deathdate) : null,
description: person.description,
picture: person.picture ? person.picture : '/client/views/person.png'
};
});
$rootScope.$broadcast('Persons.update');
loaded = true;
return persons;
});
};
return {
load: load,
persons: persons
};
}]);
次に、私はサービスを消費しているはずのコントローラを持っています。
angular.
module('karassApp').
component('personList', {
templateUrl: 'client/views/person-list.template.html',
controller: ['$scope', 'Person', function PersonListController($scope, Person){
var self = this;
Person.load().then(function(){
$scope.persons = Person.persons;
});
...
この時点で、コードは失敗し、$ scope.personsは空になります。私は、データが人に読み込まれることを保証するべきであると約束する人を待っています。私はまた、サービスがシングルトンであると考えました。つまり、最初の呼び出しの後で、人の変数にはPerson.load()
を書き込む必要があります。事前に
おかげで、 ジョシュ
更新 は、私は答えからコードを組み込むことを試み、それは次のようになります。
angular.
module('karassApp').
factory('Person', ['$http', '$q', function($http, $q){
var persons = [];
// returns a promise that resolves to the persons.
var load = function(){
return $q(function(resolve, reject){
$http.get('/get_persons').then(function(response){
persons = response.data.map(function(person){
return {
id: person.id,
fullname: person.fullname,
birthdate: person.birthdate ? new Date(person.birthdate) : null,
deathdate: person.deathdate ? new Date(person.deathdate) : null,
description: person.description,
picture: person.picture ? person.picture : '/client/views/person.png'
};
});
resolve(persons);
});
});
};
...
私はあなたのコードを試してみましたが、残念ながらそれはまだ動作しませんでした。 –
更新は[延期防止パターン](https://stackoverflow.com/questions/30750207/is-this-a-ferfer-antipattern)であり、避けるべきです。書かれているように、$ http要求が失敗した場合に作成される約束はハングします。エラーケースは適切に処理されません。 – georgeawg