我们可以将 $http 注入 Angular 服务并将该数据传递给控制器吗？答案

【问题标题】：Can we inject $http in to a Angular Service and pass that data to a controller?我们可以将 $http 注入 Angular 服务并将该数据传递给控制器吗？
【发布时间】：2016-08-01 20:54:21
【问题描述】：

我正在尝试使用 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'
         }
     ]

我想在控制器中使用来自服务的数据，但我无法传递该数据。如果我以不正确的方式注入服务，请纠正我。

谢谢！

【问题讨论】：

标签： angularjs json http angular-services angular-controller

【解决方案1】：

只需要知道它是如何流动的。获取数据，然后在处理该数据时对其进行处理。

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

【讨论】：

【解决方案2】：

感谢Joey的回答，我按照你的方法试过了，在success函数外无法打印数据：

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

【讨论】：

这导致第二个 console.log 在结果从 ajax 请求返回之前执行。那个时候联系人是未定义的，这是正确的。
对您的答案使用 cmets/edits，而不是发布您的问题的答案。您的 console.log 在您使用异步 ajax 获取数据之前执行，因为您正在使用数据
感谢 KreepN，@JoeyCiechanowicz 的解释和回答。完全明白了。

【解决方案3】：

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

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

【讨论】：

感谢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. }]);