Question

在我目前的项目中，我使用这些方面的东西来表示AJAX表格。

$scope.posting = false;
$scope.submitForm = function(form){

    log(form);
    log((!form.$invalid) ? 'Is valid' : 'Contains errors');

    $scope.posting = true;

    $http.post('/modules/ajax/addModule', $scope.module)
        .success(function(data, status, headers, config){

            data = data.data;

            log(data);

            $scope.posting = false;

            if(data.error){
                alert(data.message);
            }

        })
        .error(function(data, status, headers, config){

            data = data.data;

            log(data);

            $scope.posting = false;
        });
}

并在提交按钮<input ng-disabled="form.$invalid || posting" ... />

上

虽然键入代码并不多，但手动切换bool值对我来说似乎有点不对。无论如何要判断$ http.post是否仍然有效？

Answer 1

只需编写一个指令，该指令将禁用和启用http调用上的按钮，如下所示

app.directive('onClick', function() {
  return {
    scope: {
      onClick: '&'
    },
    link: function(scope, iElement, iAttrs) {
      iElement.bind('click', function() {
        iElement.prop('disabled',true);
        scope.onClick().finally(function() {
          iElement.prop('disabled',false);
        })
      });
    }
  };
});

注意：onClick函数应该返回一个使其工作的承诺

结帐plunker以查看其实际效果

在调用正在进行时，我使用angular-ladda作为带微调器的按钮

Answer 2

我最终做的是将此代码添加到我的全局JS文件中。

app.run(function($rootScope, $http) {
    $http.defaults.transformRequest.push(function (data) {
        $rootScope.$isPosting = true;
        return data;
    });
    $http.defaults.transformResponse.push(function(data){ 
        $rootScope.$isPosting = false;
        return data;
    }) 
});

然后我可以使用

<a ng-disabled="isPosting" ...

在AngularJS中发布数据时是否有更好的方法来禁用按钮？

2 个答案: