我们可以将$ http注入Angular Service并将该数据传递给控制器​​吗？

Question

我正在尝试使用AngularJS中的服务从外部文件加载JSON数据。

myApp.service('ContactsListService', function($http) {
    var contactsList = $http.get('js/contacts.json').success(function(data){
    return data;
    });
    console.log(contactsList); // prints some $http object 
    return {
    'contactsList': contactsList;
    };
}

myApp.controller('ContactDisplayController',['$scope','ContactsListService',function($scope, ContactsListService){
$scope.contacts = ContactsListService.contactsList;
console.log(ContactsListService.contactsList); // prints 'undefined' here
}]);

**JSON file:**

        [
          {
            name: 'Steph Curry',
            mobile: '111111111'
          },
          {
           name: 'Lebron James',
           mobile: '2323232323'
         }
     ]

我想使用控制器中服务的数据，我无法传递该数据。如果我以错误的方式注入服务，请纠正我。

谢谢！

Answer 1

您正在存储$ http承诺而不是该ajax调用的响应。一种更好的方法是服务定义一个返回promise的方法，并让控制器获得该promise并使用结果。

myApp.service('ContactsListService', function($http) {
  this.getContactsList = function() {
    return $http.get('js/contacts.json');
  };
});

myApp.controller('ContactDisplayController',['$scope','ContactsListService',function($scope, ContactsListService){
  ContactsListService.getContactsList().success(function(data) {
    $scope.contacts = data;
  });
}]);

Answer 2

感谢Joey的回答，我试过你的方式，我无法在成功函数之外打印数据：

myApp.controller('ContactDisplayController',['$scope','ContactsListService',function($scope, ContactsListService){
  ContactsListService.getContactsList().success(function(data) {
    $scope.contacts = data;
   console.log($scope.contacts); // prints data here.
  });
console.log($scope.contacts); // prints undefined here.
}]);

Answer 3

只需知道这是如何流动的。获取数据，然后对其进行处理，直接处理数据。

myApp.controller('ContactDisplayController',['$scope','ContactsListService',function($scope, ContactsListService){
     $scope.contacts = [];  //initialize it
      ContactsListService.getContactsList().success(function(data) {
        $scope.contacts = data;
         //now do stuff with it
      });
     //console logging here happens before your async call returns
    }]);