AngularJS中禁用按钮以避免重复请求导致库存重复记录

嘿，我一眼就看到几个小问题导致按钮没被禁用，咱们一步步来解决：

1. 指令名称拼写错误（核心问题） #

你在按钮上写的是ng-disable，但AngularJS中控制按钮禁用状态的正确指令是ng-disabled（注意多了一个字母d）。这个拼写错误直接导致AngularJS无法识别你的禁用绑定。

2. 移除多余的ng-model指令 #

按钮元素不需要ng-model——这个指令是用来绑定输入框、单选框这类表单控件的，放在按钮上完全没用，建议直接删掉它。

3. 修正控制器逻辑，确保点击后立即锁死按钮 #

你的save方法里，需要在发起服务器请求前就把isDisabled设为true，阻止用户重复点击；等请求完成（不管成功还是失败），再把它设回false恢复按钮可用状态。

修正后的HTML代码 #

<div class="col-sm-2" style="padding-top: 20px;"> 
  <button type="submit" id="continue" ng-disabled="isDisabled" ng-click="controller.save()" class="btn btn-primary-default" uib-tooltip="{{'buttons.save'| translate}}" name="continue" ng-focus="controller.checkList()"> 
    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 
    <span>{{'buttons.save'| translate}}</span> 
  </button> 
</div>

修正后的AngularJS控制器代码 #

$scope.isDisabled = false;

this.save = function() {
  // 点击后立即禁用按钮，防止重复提交
  $scope.isDisabled = true;

  // 替换成你实际的服务器请求逻辑
  yourApiService.saveYourData()
    .then(function(response) {
      // 请求成功后的处理，比如提示用户
      console.log('数据保存成功！');
    })
    .catch(function(error) {
      // 请求失败后的处理，比如显示错误信息
      console.error('保存失败，请重试：', error);
    })
    .finally(function() {
      // 无论请求成功或失败，最后恢复按钮可用
      $scope.isDisabled = false;
    });
};

补充说明 #

• ng-disabled="isDisabled"会在$scope.isDisabled为true时自动禁用按钮，为false时恢复可用。
• 用finally块恢复按钮状态是最佳实践，这样不管请求成功还是失败，用户都能再次操作（如果你的业务需要请求成功后永久禁用，可以把这部分代码移到then里）。

内容的提问来源于stack exchange，提问作者Parreira