Question

我相信对于任何Angular / Javascript专家来说这都是一个简单的方法。我有一个服务，它调用API来获取一些数据：

app.service("GetDivision", ["$http", function($http){

  this.division = function(divisionNumber){
    $http.post("/api/division", {division:divisionNumber}).success(function(data){
      return data;
    });
  } 

}]);

现在我在我的一个控制器中调用它，如下所示：

$scope.division = GetDivision.division(1);

但是，我的服务不太对劲。它不会返回http请求函数之外的值，因此数据不会到达调用它的控制器。如何从http请求和名为？

的函数中返回数据

Answer 1

您需要了解您无法从异步操作返回。当您尝试返回数据时，响应根本不可用。通常在Javascript中，您将使用回调或承诺模式。在Angular承诺是一个非常自然的选择。

app.service("GetDivision", ["$http", function($http) {
  this.division = function(divisionNumber){
    return $http.post("/api/division", {division:divisionNumber}).success(function(data){
      return data;
    });
  }
}]);

并在控制器中：

GetDivision.division(1).then(function(data) {
    $scope.division = data;
});

请务必阅读有关此主题的非常受欢迎的帖子：How do I return the response from an asynchronous call?

Answer 2

您可以从服务中返回空对象，并在收到响应后填充它。这就是$resource服务的方式。它还允许避免控制器中的其他逻辑。

这将起作用，因为放入范围的data对象的引用始终保持不变，并且$http服务在返回响应后开始摘要周期。因此，将立即检测scope.division中的更改，并相应地更新视图。

<强>的JavaScript

var app = angular.module('app',[]);

app.service("GetDivision", ["$http", function($http){

  var data = {};

  this.division = function(divisionNumber){
    $http.get("division", {division:divisionNumber}).success(function(responseData){
      angular.extend(data, responseData);
    });
    return data;
  } 

}]);

app.controller('ctrl', ['$scope', 'GetDivision', function ($scope, GetDivision) {
  $scope.division = GetDivision.division(1);
}]);

<强> HTML

<body ng-controller="ctrl">
  <h1>{{division.text}}</h1>
</body>

现场演示： http://plnkr.co/edit/H31mSaXiiCiVG9BA9aHK?p=preview

从Angular服务返回http数据

2 个答案: