如何在控制器中包含angular.js服务的数据？(How to include an angular.js service's data in a controller?)

我创建了一个从服务器获取数据的服务。浏览器工具确认数据已正确拾取。

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()之后应该填充person变量。

先谢谢你，乔希

更新我试图合并答案中的代码，现在看起来像这样：

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

...

I've created a service that fetches data from the server. The browser tools confirm that the data is picked up correctly.

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 }; }]);

Next up, I have controller that's supposed to be consuming the service.

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

At this point, the code fails and $scope.persons ends up empty. I waiting for the person promise to resolve should ensure that the data is loaded into persons. I also thought that the service was a singleton, which means the persons variable should be filled after the first call to Person.load().

Thanks in advance, Josh

Update I tried to incorporate the code from the answer, and it looks like this now:

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

...

最满意答案

我想到了。我有正确的想法，但我需要让人们能够将其传递到下一个。

服务：

angular. module('karassApp'). factory('Person', ['$rootScope', '$http', '$q', function($rootScope, $http, $q){ var persons = []; // 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' }; }); return 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(persons){ self.persons = persons; });

I figured it out. I had the right idea, but I needed to return persons to be able to pass it to the next then.

service:

angular. module('karassApp'). factory('Person', ['$rootScope', '$http', '$q', function($rootScope, $http, $q){ var persons = []; // 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' }; }); return persons; }); };

controller:

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(persons){ self.persons = persons; });

更多推荐