AngularJS中如何将Service获取的HTTP数据传递到Controller

核心逻辑 #

AngularJS依托自身的依赖注入机制，可直接将封装了HTTP请求的自定义服务注入到Controller中使用，$http请求本身返回Promise对象，直接在Controller中处理Promise回调即可拿到服务层返回的数据。

具体实现步骤 #

• 首先封装负责发起HTTP请求的自定义服务，服务内部依赖AngularJS内置的$http服务，请求完成后直接返回$http生成的Promise实例，将数据处理逻辑交给Controller层实现，实现层级解耦。
• 编写Controller时，将封装好的自定义服务作为依赖项注入，调用服务后在Promise的回调方法中接收接口返回的结果。
• 将请求拿到的结果挂载到$scope对象上，即可完成Controller层的数据接收，后续视图层可直接读取$scope上的绑定值完成页面渲染。

完整可运行代码示例 #

你提供的代码本身就是正确的实现方案，下面补全服务和控制器的注册逻辑，同时修正废弃API的写法：

// 1、先注册自定义服务loc8rData，用于封装位置相关接口请求
angular.module('yourAppName').service('loc8rData', function ($http) {
  this.getLocationList = function () {
    // 返回Promise实例，交给Controller处理回调
    return $http.get('/api/locations?lng=33.7741195&lat=-13.9626121&maxDistance=20');
  }
});

// 2、注册控制器，注入loc8rData服务使用
angular.module('yourAppName').controller('locationListCtrl', function($scope, loc8rData) {
  $scope.message = "正在查找附近地点";
  // 调用服务的请求方法
  loc8rData.getLocationList()
    // 推荐用标准then/catch代替已废弃的success/error
    .then(function (response) {
      const data = response.data;
      $scope.message = data.length > 0 ? "" : "未找到匹配地点";
      // 将数据挂载到$scope上，完成数据传递
      $scope.data = { locations: data };
    })
    .catch(function (error) {
      $scope.message = "抱歉，请求出错了";
      console.log(error);
    });
});

注意事项 #

• 不要在Service层直接操作$scope，会导致服务和控制器强耦合，不符合单一职责原则。
• AngularJS 1.x版本的success和error回调方法已在1.4版本后标记为废弃，推荐使用标准Promise的then和catch方法处理请求结果，兼容性和可维护性更好。

内容的提问来源于stack exchange，提问作者Mzala123