AngularJS factory http retorna vazio - http, angularjs, factory, angularjs-service

Estou tentando AngularJS pela primeira vez. Estou obtendo dados JSON de uma solicitação http-get usando uma fábrica, mas o objeto é retornado vazio, antes que a solicitação ajax seja concluída.

Fábrica:

myDemo.factory("photosFactory", function($http) {
var photos = [];

var factory = {};

factory.getPhotos = function() {
$http({
url: "content/test_data.json",
method: "GET"
}).success(function(data, status, headers, config) {
photos = data;
return photos;
});
};
return factory;
});

Controlador:

controllers.AppCtrl = function($scope, $location, $http, photosFactory) {
$scope.photos = [];
init();
function init() {
$scope.photos = photosFactory.getPhotos();
}
};

Isso é o que eu descobri. Quando o controlador define $ scope.photos, o valor está vazio, como se ele retornasse o array photos antes de ser preenchido com a resposta ajax.

Respostas:

Você deve modificar seu código para retornar uma promessa e usar o valor no controlador, por favor, consulte o código modificado fictício

myDemo.factory("photosFactory", function($http) {
return{
getPhotos : function() {
return $http({
url: "content/test_data.json",
method: "GET"
})
}
}
});

e controlador -

controllers.AppCtrl = function($scope, $location, $http, photosFactory) {
$scope.photos = [];
photosFactory.getPhotos().success(function(data){
$scope.photos=data;
});
};

Usar a biblioteca de promessas q significa que sua função de sucesso pode permanecer a seu serviço:

app.factory("Data", function ($http, $q) {
return {
ajaxItems: function () {
var deferred = $q.defer();
$http({ method: "POST", url: "/Home/GetSearchResults" })
.success(function (data, status, headers, config) {
deferred.resolve(data);
}).error(function (data, status, headers, config) {
deferred.reject(status);
});
return deferred.promise;
}
}
});

app.controller("ResultsCtrl", ["$scope", "Data", function ($scope, Data) {
$scope.get = function () {
$scope.items = Data.ajaxItems();
//the model returns a promise and THEN items
$scope.items.then(function (items) {
$scope.items = items;
}, function (status) {
console.log(status);
});
};
}]);

Usando o $resource permitirá que você alcance o que deseja, além de lhe dar muito mais controle em comparação com $http

(Não se esqueça de incluir ngResrouce como uma dependência do seu aplicativo.)

myDemo.factory("photosFactory", function($resource) {
var factory = {};

factory.getPhotos = $resource("content/test_data.json", {}, {
"query": {method: "GET", isArray: true}
});
return factory;
});

controllers.AppCtrl = function($scope, $location, $http, photosFactory) {
$scope.photos = [];
init();
function init() {
$scope.photos = photosFactory.getPhotos.query();
}
};