AngularJS Factory http gibt leer

Question

Ich versuche AngularJS zum ersten Mal. Ich erhalte JSON-Daten von einer http-get-Anfrage unter Verwendung einer Factory, aber das Objekt wird leer zurückgegeben, bevor die Ajax-Anfrage abgeschlossen ist.

Factory:

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

Controller:

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

Dies ist, was ich habe kommen mit. Wenn der Controller $ scope.photos einstellt, ist der Wert leer, als würde er das fotos-Array zurückgeben, bevor es mit der Ajax-Antwort gefüllt wird.

Answer 1

sollten Sie Ihren Code modifizieren, um ein Versprechen zurückzukehren und den Wert im Controller benutzen pls sehen Dummy modifizierten Code

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

und Controller -

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

Answer 2

die $resource Mit lassen erreichen Sie, was Sie wollen, plus geben Sie viel mehr Kontrolle im Vergleich zu $http

(Vergessen Sie nicht,.als Abhängigkeit zu Ihrer App)

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

die q Versprechen Bibliothek verwenden bedeutet, dass Ihre Erfolgsfunktion in Ihrem Dienst bleiben kann:

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