Fabryka AngularJS zwraca wartość pustą

Question

Próbuję AngularJS po raz pierwszy. Otrzymuję dane JSON z żądania http-get przy użyciu fabryki, ale obiekt jest zwracany pusty, zanim zapytanie ajax zostanie wykonane.

fabryczne:

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

Kontroler:

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

To co mam wymyślić. Gdy kontroler ustawia wartość $ scope.photos, wartość jest pusta, tak jakby zwracała tablicę zdjęć, zanim zostanie wypełniona odpowiedzią ajax.

Answer 1

Należy zmodyfikować kod, aby powrócić obietnicę i użyć wartości w pls kontrolera zobaczyć manekin zmodyfikowany kod

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

i kontroler -

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

Answer 2

Używanie $resource pozwoli Ci osiągnąć to, czego chcesz, plus daje znacznie więcej kontroli w porównaniu do $http

(Nie zapomnij dołączyć.jako zależność do aplikacji)

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

Korzystanie z biblioteki q obietnica oznacza, że ​​funkcja sukces może pozostać w służbie:

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