我們可以將$ 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 promise，而不是來自該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; 
    }); 
}]); 

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