提问人:Mzala123 提问时间:8/24/2021 最后编辑:R. RichardsMzala123 更新时间:8/24/2021 访问量:55
如何在 AngularJS 中将 HTTP 数据从服务传递到控制器
how to pass http data from service to controller in angularjs
问:
var locationListCtrl=function($scope, loc8rData){
$scope.message = "Searching for nearby places";
loc8rData
.success(function(data){$scope.message = data.length > 0 ? "" : "No locations Found";
$scope.data = { locations: data };
})
.error(function(e){
$scope.message = "Sorry, Something has gone wrong";
console.log(e);
});
};
var loc8rData = function ($http){
return $http.get('/api/locations?lng=33.7741195&lat=-13.9626121&maxDistance=20');
};
答:
0赞
joseglego
8/24/2021
#1
几点:
请注意,当您收到一个响应时,它是通用响应(带有状态、标头等)。因此,如果您想访问您的数据,则必须执行以下操作:
$http
response.data
通常,当您拥有服务时,会定义多个终结点。因此,您可以返回一个具有多个请求的对象。
检查这个小示例的工作: https://plnkr.co/edit/FNxEeVZti6D1wmLe
.service('PokeApi', function($http) {
return ({
getPokemon: function (name) {
return $http({
method: 'GET',
url: 'https://pokeapi.co/api/v2/pokemon/' + name,
headers: { 'Content-Type': 'application/json' }
});
}
})
})
控制器非常简单:
.controller('MainCtrl', function($scope, PokeApi) {
$scope.name = 'Plunker';
PokeApi.getPokemon('pikachu').then(function (response) {
$scope.pokemon = response.data;
});
});
评论
0赞
Mzala123
8/25/2021
感谢您的帮助,那么我怎样才能将这个response.data分配给.jade文件中相应的angular对象呢?
0赞
joseglego
8/25/2021
这将是一个不同的问题。而且,我需要更多的背景信息来帮助您:(。为什么?因为有不同的方法可以用angularjs制作文件。根据您的代码和问题,我会说: 更改为 这样,您将访问“预期对象”.jade
.success(function(data){$scope.message = data.length > 0 ? "" : "No locations Found"; $scope.data = { locations: data }; })
.success(function(response){$scope.message = response.data.length > 0 ? "" : "No locations Found"; $scope.data = { locations: response.data }; })
0赞
joseglego
8/25/2021
我给你的其他建议是:在本地执行时调试那部分代码,看看你收到了什么。您可以在前面包含单词并尝试该数据debugger
$scope.message = data.length
console.log
0赞
Mzala123
8/25/2021
这很有帮助。我已经按照你的建议进行了更改,并且效果很好。非常感谢
0赞
joseglego
8/26/2021
没关系!很愉快。在这种情况下,请记住将答案标记为已接受。:).@Mzala123
评论