AngularJS工厂http返回空
我第一次尝试AngularJS。我使用工厂从http get请求获取JSON数据,但在ajax请求完成之前,对象返回为空 工厂:AngularJS工厂http返回空,http,angularjs,factory,angularjs-service,Http,Angularjs,Factory,Angularjs Service,我第一次尝试AngularJS。我使用工厂从http get请求获取JSON数据,但在ajax请求完成之前,对象返回为空 工厂: myDemo.factory('photosFactory', function($http) { var photos = []; var factory = {}; factory.getPhotos = function() { $http({ url: 'content/test_data.j
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响应填充之前返回照片数组一样。您应该修改代码以返回承诺,并在控制器中使用该值。请参阅虚拟修改代码
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;
});
};
与$http
(不要忘记将ngResrouce
作为应用程序的依赖项。)
使用q promise库意味着您的成功功能可以留在您的服务中:
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);
});
};
}]);
与@Ajay beniwal answer相比,这样做的优势是什么?当使用
$resource
时,您的每张照片都是AngularJsresource
对象,其中包含$save
$delete
等方法,这使得使用Restful api变得更加容易。谢谢。我认为这是最好的方法。它使控制器保持倾斜。谢谢,这是我一直在寻找的。:)我们如何处理这个错误?当出现错误时,项目的值是多少?我可以将此用于post方法吗?
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);
});
};
}]);