Angularjs 如何在控制器中包含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最终为空。我在等待承诺解决的人员时，应确保将数据加载到人员中。我还认为服务是单例的，这意味着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);
        });
      });
    };

---

…我想出来了。我有一个正确的想法，但我需要返回人员，以便能够将其传递给下一个

服务：

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

---

我尝试了你的代码，但不幸的是它仍然不起作用。更新是一个错误，应该避免。如前所述，如果$http请求失败，它创建的承诺将挂起。错误案例处理不当。这是正确答案。问题是.then方法中的回调函数忽略了一个参数，您将其更正为persons。