The problem:
When I was using $http service to get data from a remote API, my code below was not able to return data back to the controller.
myApp.factory('myFactory', function($http){
var data = { anArray:[] };
$http.get('/api').success(function(data) {
data.anArray.push(data);
});
return data;
});This is because the return data is already executed before the $http get request finish pushing data into the array.
My solution:
In order to handle data asynchronously, the controller needs to tell the service what to do when the data is received later:
myApp.factory('myFactory', function($http){
return {
getData: function(){
return $http.get('/api');
} };
});
myApp.controller('MyController', ['$scope', 'myFactory', function($scope, myFactory) {
$scope.data = [];
var handleSuccess = function(data, status){
$scope.data = data;
};
myFactory.getData().success(handleSuccess);
}Let me know if you have any questions ☺