AngularJS factory http returns empty

Question

我在第一次嘗試AngularJS。我使用工廠從http-get請求獲取JSON數據，但是在ajax請求完成之前，對象返回爲空。

廠：

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

控制器：

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

這是我想出。當控制器設置$ scope.photos時，該值爲空，就像它在用ajax響應填充之前返回照片數組一樣。

Answer 1

您應該修改代碼以返回一個承諾，使用控制器請數值看空修改後的代碼

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

和控制器 -

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

Answer 2

使用$resource將讓你實現你想要，加上給你更多的控制相比$http

（不要忘記包括。作爲一個依賴於你的應用程序）使用Q承諾庫

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

意味着你的成功的功能可以留在你的服務：

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