javascript - 如何将 ajax 结果发送到 Angular 中的 Controller ？

Question

我有一项服务可以从我的 ajax 调用中获取值。我想将该值存储在一个变量中并将该变量传递给 Controller ​​。

angular.module("Data", []).service("DataService", function($http) {
  return {
    Data: function(callback) {
      $http.get('http://www.w3schools.com/angular/customers.php').success(callback);
    }
  }
})

angular.module("Home", ["Data"]).service("HomeService", function(DataService) {
  var customerData = {}
  return {
    Getdata: DataService.getCustomers(function(results) {
      customerData = results;
      console.log(customerData)
    })
  }
})


angular.module("Home").controller("HomeCntrl", function($scope, HomeService) {

  $scope.Result = HomeService.Getdata;

})

我希望数据存储在 customerData 中，我必须将 customerData 传递给 Controller ​​。

Answer 1

你不应该为此使用回调(虽然它也是可能的)，不是很方便。 Promises是这种情况的一切。所以你的代码应该是这样的:

angular.module("Data", []).service("DataService", function($http) {
    return {
        getCustomers: function() {
            return $http.get('http://www.w3schools.com/angular/customers.php').then(function(response) {
                return response.data;
            });
        }
    }
});

angular.module("Home", ["Data"]).service("HomeService", function(DataService) {
    return {
        getData: function() {
            return DataService.getCustomers().then(function(data) {
                console.log('customers', data);
                // maybe process data further and return new set
                return data;
            });
        }
    }
});

angular.module("Home").controller("HomeCntrl", function($scope, HomeService) {
    HomeService.getData().then(function(data) {
        $scope.Result = data;
    });
});

演示: http://plnkr.co/edit/7V2mqacof72Ad9cuCivh?p=preview