【问题标题】:how to pass http data from service to controller in angularjs如何在angularjs中将http数据从服务传递到控制器
【发布时间】:2021-10-24 17:22:01
【问题描述】:
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');
};

【问题讨论】:

    标签: angularjs asynchronous response


    【解决方案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;
      });
    });
    

    【讨论】:

    • 感谢您的帮助,那么如何将此 response.data 分配给 .jade 文件中的相应角度对象?
    • 这将是一个不同的问题。而且,我需要更多的上下文来帮助你:(。为什么?因为有不同的方法可以让 .jade 文件与 angularjs。根据你的代码和问题,我会说:更改:.success(function(data){$scope.message = data.length > 0 ? "" : "No locations Found"; $scope.data = { locations: data }; }) 到 @987654328 @ 这样你将访问“预期对象”
    • 我给你的其他建议是:在本地执行时调试那部分代码,看看你收到了什么。您可以在$scope.message = data.length 之前包含单词debugger 并尝试console.log 该数据
    • 这很有帮助。我已经按照您的建议进行了更改,并且效果很好。非常感谢
    • 没问题!是一种乐趣。在这种情况下,请记住将答案标记为已接受。 :)。 @Mzala123
    猜你喜欢
    • 2019-01-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-04-18
    • 2014-11-10
    • 1970-01-01
    相关资源
    最近更新 更多