如何在控制器中包含 angular.js 服务的数据？

Question

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

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

提前致谢，乔希

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

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

...

Answer 1

我明白了。我有一个正确的想法，但我需要 return 人才能将它传递给下一个 then。

服务：

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

如何在控制器中包含 angular.js 服务的数据？

How to include an angular.js service's data in a controller?

angularjs

angular-services

angular-promise