javascript - 我应该将 AJAX 调用的响应处理程序代码放在 Angular.js 中的哪里？

Question

我对 Angular.js 还很陌生。我尝试让我的代码保持井井有条，特别是我的 Controller 。我当前的设置如下:

我的 Controller 拾取用户事件，例如单击按钮将调用 Controller 中的 $scope.upgrade()。

$scope.upgrade = function() {
  $scope.submitting = true // disable upgrade button
  payment.chargeCreditCard($scope);
};

然后，付款 服务接管并执行实际工作，其中包括对后端进行 AJAX 调用。在我的支付服务模块中，代码如下:

payment.chargeCreditCard = function($scope) {
  $http({
    method: 'post',
    url: endpoint,
    data: data
  }).success(function() {
    // do things...
  }).error(function() {
    $scope.error = "Something wrong happened."; // $scope was passed in from controller
    $scope.submitting = false; // Re-enable the button
  });
};

我的问题是，将 $scope 从 Controller 传递到服务感觉是错误的。服务应该是独立的，不应该关心诸如设置 $scope.error 和 $scope.submitting 的值之类的事情。

Angular 执行此操作的方式是什么？

==更新==

所以我想出的一个解决方案是在服务中进行 AJAX 调用，但将结果返回给 Controller 。像这样的东西:

// in controller
$scope.upgrade = function() {
  // call service...
  var response = payment.chargeCreditCard($scope);

  response
    .success(function() {
      // ...
    })
    .error(function() {
      // set $scope.error etc...
    });
};

但是 Controller 仍然相当臃肿，唯一可用的就是 AJAX 调用本身，这使得分离代码似乎不太值得。

Answer 1

返回服务中 $http 调用的结果，并在 Controller 中使用 success 处理程序。

Controller

$scope.upgrade = function() {
  $scope.submitting = true // disable upgrade button
  payment.chargeCreditCard().success(function() {
    // do stuff
  }).error(function() {
    // Do other stuff
  });
};

服务

payment.chargeCreditCard = function() {
  return $http({
    method: 'post',
    url: endpoint,
    data: data
  });
};

如果这不是您想要的，另一种方法是使用事件。因此，在您的服务中，$rootScope 具有依赖项并使用 $broadcast 方法。

Controller

$scope.upgrade = function() {

  $scope.submitting = true // disable upgrade button
  payment.chargeCreditCard();

  $scope.$on("chargeCreditCard:success", function(ev, data) {
    // Do stuff
  });

  $scope.$on("chargeCreditCard:error", function(ev, err) {
    // Do other stuff
  });
};

服务

payment.chargeCreditCard = function() {
  return $http({
    method: 'post',
    url: endpoint,
    data: data
  }).success(function(data) {
    $rootScope.$broadcast("chargeCreditCard:success", data);
  }).error(function(err) {
    $rootScope.$broadcast("chargeCreditCard:error", err);
  });
};

但我猜 Controller 是“胖”的，也不确定包含影响其范围属性的代码的 Controller 有什么问题。通过传递范围，您将使服务依赖于 Controller 或至少范围/对象上的一组属性，这违背了关注点的分离。

在这种情况下，服务的 Angular 色是获取数据并以某种方式返回数据，但服务 Angular 色不应该是修改 Controller 属性。