问题描述
限时送ChatGPT账号..在 angular 中,我们可以设置一个按钮来发送这样的 ajax 请求:
... ng-click="button-click"
在控制器中:
<预><代码>...$scope.buttonClicked = function() {......//发起ajax请求......}因此,为了防止双重提交,我可以在单击按钮时将标志设置为 buttonclicked = true,并在 ajax 回调完成时取消设置.但是,即使这样,控制权也会被处理回 angular,谁将更新 Dom.这意味着在原始按钮点击完全 100% 完成之前,有一个小窗口可以再次点击按钮.
这是一个小窗口,但仍然可能发生.任何完全避免这种情况发生的提示 - 客户端,即不对服务器进行任何更新.
谢谢
解决方案使用 ng-disabled
在这个 示例.无论我多么疯狂地点击控制台消息只填充一次.
var app = angular.module('plunker', []);app.controller('MainCtrl', function($scope) {$scope.submitData = function() {$scope.buttonDisabled = true;console.log("按钮被点击");}函数扩充(){变量名,fn;for($scope 中的名称){fn = $scope[name];if (typeof fn === '函数') {if (name.indexOf("$") !== -1) {$scope[name] = (function(name, fn) {var args = 参数;返回函数(){console.log("调用" + 名称);控制台时间(名称);fn.apply(this, arguments);console.timeEnd(name);}})(姓名, fn);}}}}增加();});
<html ng-app="plunker"><头><meta charset="utf-8"><title>AngularJS Plunker</title><link rel="stylesheet" href="style.css"><script src="https://ajax.googleapis/ajax/libs/angularjs/1.0.1/angular.js"></script><script src="app.js"></script>头部><body ng-controller="MainCtrl"><input type="button" ng-click="submitData()" ng-disabled="buttonDisabled" value="提交"/>
发布评论