javascript - 在 angularjs $resource 请求期间阻止/取消阻止表单

Question

每次对服务器执行异步调用时，我都希望我的表单被禁用。目前，我通过 $scope 变量手动执行此操作，该变量分配给我的字段集的 ng-disabled 属性。但是我认为必须有某种方法可以使用 HTTP 拦截器来做到这一点？请建议如何“捕获”每次调用之前/之后发生的事件，以便我可以使用这些事件处理程序阻止表单？

Answer 1

如果您希望在有 $http 事件时随时显示表单(很像加载小部件)，那么您可以为此使用拦截器。

本质上，您将从 $rootScope 中获取 $broadcast 事件，并在附加到您的表单的指令中捕获它们，这将根据它所触发的事件启用或禁用表单正在处理。

此代码改编自 blog post涵盖加载小部件用例场景:

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);
    }
  };
});