example - AngularJS fábrica http devuelve vacío

factory angularjs example

Question

Estoy probando AngularJS por primera vez. Obtengo datos JSON de una solicitud http-get utilizando una fábrica, pero el objeto se devuelve vacío antes de que se realice la solicitud ajax.

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

Esto es lo que he encontrado. Cuando el controlador establece $ scope.photos, el valor está vacío como si devolviera la matriz de fotos antes de que se rellenara con la respuesta ajax.

Answer 1

Debe modificar su código para devolver una promesa y usar el valor en el controlador. Consulte el código modificado ficticio.

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

y controlador -

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

Answer 2

El uso de $resource le permitirá lograr lo que desea, y además le dará mucho más control en comparación con $http

(No olvide incluir ngResrouce como una dependencia de su aplicación).

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

Answer 3

El uso de la biblioteca q promise significa que su función de éxito puede permanecer en su servicio:

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