L'indirizzo http di fabbrica di AngularJS restituisce vuoto

Question

Sto provando AngularJS per la prima volta. Ricevo i dati JSON da una richiesta http-get utilizzando un factory, ma l'oggetto viene restituito vuoto, prima che venga eseguita la richiesta ajax.

fabbrica:

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

Questo è quello che è venuta in mente. Quando il controller imposta $ scope.photos, il valore è vuoto come se restituisse l'array di foto prima che venisse popolato con la risposta ajax.

Answer 1

Si dovrebbe modificare il codice per restituire una promessa e utilizzare il valore in pls del controller vedere manichino modificato il codice

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

e il controller -

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

Answer 2

Utilizzando la $resource vi permetterà di raggiungere ciò che si vuoi, oltre a darti molto più controllo rispetto a $http

(non dimenticare di includere.come una dipendenza per la vostra applicazione)

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

Utilizzando la libreria q promessa significa che la vostra funzione di successo può rimanere in servizio:

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