Можем ли мы вложить $ http в Угловую службу и передать эти данные контроллеру?

Question

Я пытаюсь загрузить данные JSON из внешнего файла, используя службу в AngularJS.

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. Лучший подход заключается в том, чтобы служба определила метод, который вернул обещание, и для вашего контроллера, чтобы получить это обещание и использовать результат.

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

Спасибо за ответ Джо, я пытался в своем пути, я не могу печатать данные за пределами функции успеха:

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