javascript - AngularJS，如何使用服务捕获 HTTP 数据并将其绑定(bind)到我的 Controller ？

Question

我有一个运行良好的 API 调用，但我想在多个 Controller 上使用它，因此我将其移至它自己的服务中。我遇到了一个看起来像是经典的 Scope 问题或者对 Angular 的摘要周期的误解。

'use strict';
myApp.factory('Stuff',['$http', function ($http) {
  var Stuff = {};
  Stuff.data = {};
  Stuff.api = 'http://localhost:8080/api/';
  Stuff.getStuff = function() {
    var http_stuff_config = {
      method: 'GET',
      url: Stuff.api + 'stuff/'
    };
    $http(http_stuff_config).then(function successCallback(response) {
      Stuff.data = (response.data);
      console.log(Stuff.data); // Returns populated object. 
    },function errorCallback(response) {
      console.log(response.statusText);
    });
  };
  Stuff.getStuff();
  console.log(Stuff.data); // Returns empty object.
  return Stuff;
}]);

myApp.controller('appController', ['$scope','Stuff',function($scope,Stuff) {
  $scope.stuff = Stuff;
  console.log($scope.stuff.data); // Returns empty object.
  $scope.stuff.getJobs();
  console.log($scope.stuff.data); // Returns empty object.
}]);

这是一个大线索。上面的基本输出按顺序是...

1. 空对象(调用方法后处于服务状态)
2. 空对象(在调用方法之前在 Controller 中)
3. 空对象(调用方法后在 Controller 中)
4. 填充对象(在服务的方法执行中)
5. 填充对象(在 Controller 的方法执行中)

因此，在 getStuff() 方法的范围和 Angular 的操作顺序之间的某个地方，我正在做一些非常愚蠢的事情。预先感谢您。

Answer 1

您需要在您的服务中添加返回，否则 promise 将不会返回给控制者。仅将返回结果存储在服务中而不将结果返回给 Controller 并不是一个好习惯。

这被认为是不好的做法，因为每当您更新服务上的数据时，每个人都需要将 $scope.$watch 应用于服务以查找更新。这在大型应用程序中可能非常昂贵。

最好的想法是将数据返回给调用 Controller (如果不需要缓存它，这个我们稍后会讨论)并让 Controller 通过promise service.getthing() 访问它。 then(函数(结果){});

myApp.factory('Stuff',['$http', function ($http) {
  var Stuff = {};
  Stuff.data = {};
  Stuff.api = 'http://localhost:8080/api/';
  Stuff.getStuff = function() {
    var http_stuff_config = {
      method: 'GET',
      url: Stuff.api + 'stuff/'
    };
    return $http(http_stuff_config).then(function successCallback(response) {
      return response.data;
      console.log(Stuff.data); // Returns populated object. 
    },function errorCallback(response) {
      console.log(response.statusText);
    });
  };
  Stuff.getStuff();
  console.log(Stuff.data); // Returns empty object.
  return Stuff;
}]);




myApp.controller('appController', ['$scope','Stuff',function($scope,Stuff) {
  $scope.stuff = Stuff;
  console.log($scope.stuff.data); // Returns empty object.
  $scope.stuff.getJobs().then(function(result) {$scope.stuff = result; console.log(result);});
  console.log($scope.stuff.data); // Returns empty object.
}]);