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