AngularJS问题：无法将服务返回值加载到$scope中

嘿，我看你遇到的问题其实分两种情况，先从你贴的代码本身的问题说起，再聊聊你提到的「服务后加载」可能涉及的异步场景~

你当前的getCategories只是服务内部的私有函数，没有挂载到服务实例上，所以控制器调用getCategoriesService.getCategories()的时候根本找不到这个方法，自然返回undefined。

修复后的服务代码应该是这样的：

'use strict';
angular.module('myApp')
  .service('getCategoriesService', function ($rootScope) {
    // 把方法挂载到this上，让外部能访问到
    this.getCategories = function () {
      var categoriesByLocation = 1;
      return categoriesByLocation;
    };
  });

这样控制器调用后就能拿到预期的1了。

如果你说的「服务后加载」是指getCategories实际是异步操作（比如调用后端API拿数据，数据返回会晚于控制器初始化），那同步返回肯定不行，这时候得用AngularJS的$q服务处理异步逻辑：

第一步：修改服务返回Promise #

'use strict';
angular.module('myApp')
  .service('getCategoriesService', function ($rootScope, $q) {
    this.getCategories = function () {
      var deferred = $q.defer();
      // 这里用setTimeout模拟异步请求（实际项目里换成$http.get之类的接口调用）
      setTimeout(function(){
        var categoriesByLocation = 1; // 这里替换成接口返回的真实数据
        deferred.resolve(categoriesByLocation);
      }, 1000);
      return deferred.promise;
    };
  });

第二步：控制器里通过.then接收异步结果 #

angular.module("myApp")
  .controller('MyCtrl', function ($scope, getCategoriesService) {
    getCategoriesService.getCategories()
      .then(function(data){
        // 异步数据返回后，再赋值给$scope
        $scope.resultCategory = data;
      })
      .catch(function(error){
        // 别忘了处理错误情况
        console.error('获取分类数据失败:', error);
      });
  });

额外方案：用路由resolve预先加载数据 #

如果你的页面是通过路由跳转的，还可以在路由配置里用resolve预先加载服务数据，确保控制器初始化时数据已经准备好：

angular.module('myApp')
  .config(function($routeProvider) {
    $routeProvider
      .when('/your-page', {
        templateUrl: 'your-page.html',
        controller: 'MyCtrl',
        resolve: {
          // 预先加载分类数据
          categories: function(getCategoriesService) {
            return getCategoriesService.getCategories();
          }
        }
      });
  });

然后控制器直接注入预加载好的数据：

angular.module("myApp")
  .controller('MyCtrl', function ($scope, categories) {
    $scope.resultCategory = categories;
  });

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