如何在控制器中包含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()後應填寫人員變量。

由於提前， 喬希

更新 我試圖從答案納入代碼，現在看起來是這樣的：

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

我弄清楚了。我有正確的想法，但我需要返回人員才能將其傳遞給下一個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; 
     });