问题
I'm using AngularJS 1.2.0. When I'm calling a webservice with $resouce the response variable is always empty. The webservice is called correctly and the webservice is sending the result to the browser. The problem is that (callback(response){}) response is always empty.
angular.module('app').factory('geoCoding',['$resource', function ($resource) {
return $resource('http://open.mapquestapi.com/geocoding/v1/address', {key: getGeoKey()}, {
locate: {method: 'GET', isArray: false}
});
}]);
$scope.getLocations = function (locationName) {
return geoCoding.locate({location: locationName}).$promise.then(
function (response) {
log.log('response ', response);
if (response && response.data && response.data.results && response.data.results[0]) {
var locations = [];
response.data.results[0].locations.forEach(function (location) {
locations.push({name: geoUtils.location2String(location), location: location});
});
return locations;
} else {
return {};
}
}, function (error) {
log.error('Locations Query error: ', error);
});
};
回答1:
Here are a few different approaches using 1.2.0rc1.
var app = angular.module('app', ['ngResource']);
app.factory('geoCoding',['$resource', function ($resource) {
return $resource('response.json', {key: 123}, {
locate: {method: 'GET', isArray: false}
});
}]);
app.controller('MainCtrl', function($scope,geoCoding){
// bind it directly to the async result
$scope.locations = geoCoding.locate({location: "a location"});
// use a function to trigger the request
$scope.getLocations = function () {
$scope.resp = geoCoding.locate({location: "a location"});
};
// use a function to trigger the request using the promise
$scope.getLocationsAlt = function() {
geoCoding.locate({location: "a location"}).$promise.then(function(response){
$scope.respAlt = response;
}, angular.noop);
};
});
Updated based on comment
It looks like the problem you are facing is that the data is coming back in an unexpected format. Here is what the updated code would look like (http://plnkr.co/edit/xzZHvm?p=preview):
var app = angular.module('app', ['ngResource']);
app.factory('geoCoding',['$resource', '$http', '$log', function ($resource, $http, $log) {
return $resource('http://open.mapquestapi.com/geocoding/v1/address', {}, {
locate: {method: 'GET', isArray: true, transformResponse: $http.defaults.transformResponse.concat(function(data, headersGetter) {
// probably be better if you examined the results in here
$log.info(data.results[0]);
return data.results[0].locations;
})}
});
}]);
app.controller('MainCtrl', function($scope, $log, geoCoding){
$scope.locations = geoCoding.locate({location: "Dallas, TX"});
});
回答2:
I've created a plunker which shows $resource callbacks being logged working with similar code to yours here: http://plnkr.co/edit/o7hjbd3H2vl2LuHBjI8O?p=preview
When I used the URL you have above I got an ORIGIN error and the request wasn't being made successfully, so I've demonstrated with a response.json stub instead.
回答3:
I appreciate all of you for the help, and probably I'm saying the same thing, but the truth is, I can't do it right yet. I fixed my errors and at this moment, my code doesn't have errors but all my page disappeared. I don't understand if I am opening the api already or simply it's not working. I'll send my .js code to create a little discussion about it.
Thanks for your help.
'use strict';
angular.module('SiteApp', []) .controller('LoginCtrl', ['$scope', '$location', '$http', function ($scope, $http) { $scope.user = {username: '', password: ''};
$scope.go = function() {
$http.jsonp('http://beta.cloogy.com:6969/api/1.0', {
data : {
User: user.username,
Password: user.password
}
})
.success(function (data) {
$scope.$parent.image = data;
$location.path('/Index'); //this is a simply second view to test
})
.error(function (data) {
$scope.msg="Error loading the page!";
});
}
} ]);
来源:https://stackoverflow.com/questions/18548114/angularjs-1-2-0-resource-response-is-empty