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()之后应该填充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);
        });
      });
    };

...

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

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

1 个答案: