在angularjs $resource请求时，Block/unblock表单

Question

我想有我的表单禁用每次当我执行异步调用服务器。目前，我通过$scope变量手动执行，该变量分配给我的字段集的ng-disabled属性。然而，我认为必须有一些方法来做到使用HTTP拦截器?请建议如何"捕捉"事件发生之前/之后每次调用，所以我可以阻止使用这些事件处理程序的形式?

Answer 1

如果你想在$http活动时显示表单(就像加载小部件一样)，那么是的，你可以使用拦截器。

本质上，您将$broadcast事件从$rootScope和捕获它们的指令附加到您的表单，这将启用或禁用表单基于它正在处理的事件。

这段代码改编自一篇关于加载小部件用例场景的博客文章:

angular.module('formApp', [])
.config(function($httpProvider) {
  $httpProvider.interceptors.push('disableFormInterceptor');
})
.directive('formToggle', function() {
  return {
    link: function($scope, $element, attrs) {
      var disable = function() {
        // disable form
      };
      var enable = function() {
        // enable form
      };
      $scope.$on('disableForm', disable);
      $scope.$on('enableForm', enable);
    }
  };
})
.factory('disableFormInterceptor', function($q, $rootScope) {
  var activeRequests = 0;
  var started = function() {
    if(activeRequests==0) {
      $rootScope.$broadcast('disableForm');
    }    
    activeRequests++;
  };
  var ended = function() {
    activeRequests--;
    if(activeRequests==0) {
      $rootScope.$broadcast('enableForm');
    }
  };
  return {
    request: function(config) {
      started();
      return config || $q.when(config);
    },
    response: function(response) {
      ended();
      return response || $q.when(response);
    },
    responseError: function(rejection) {
      ended();
      return $q.reject(rejection);
    }
  };
});