angular ng-click防止重复提交
方法一:点击后,让button的状态变为disable
js指令:
.directive('clickAndDisable', function() {
return {
scope: {
clickAndDisable: '&'
},
link: function(scope, iElement, iAttrs) {
iElement.bind('click', function() {
iElement.prop('disabled',true);
scope.clickAndDisable().finally(function() {
iElement.prop('disabled',false);
})
});
}
};
})
html:
<button type="button" class="btn btn-info btn-bordered waves-effect w-md waves-light" click-and-disable="next()">下一步</button> //把 ng-click 改为指令click-and-disable
方法二:在app.config里面,重写ng-click事件,设置一定事件内不能重复点击
$provide.decorator('ngClickDirective',['$delegate','$timeout', function ($delegate,$timeout) { //记得在config里注入$provide
var original = $delegate[0].compile;
var delay = 500;//设置间隔时间
$delegate[0].compile = function (element, attrs, transclude) {
var disabled = false;
function onClick(evt) {
if (disabled) {
evt.preventDefault();
evt.stopImmediatePropagation();
} else {
disabled = true;
$timeout(function () { disabled = false; }, delay, false);
}
}
// scope.$on('$destroy', function () { iElement.off('click', onClick); });
element.on('click', onClick);
return original(element, attrs, transclude);
};
return $delegate;
}]);
angular ng-click防止重复提交的更多相关文章
- web前端防治重复提交
web前端开发中防治重复提交 web前端数据请求或者表单提交往往通过对dom的点击事件来操作,但是往往因为认为点击过快(少年手速挺快的嘛),或者因为响应等待使得用户误人为没操作而重复很多次点击,造成表 ...
- php 解决和避免form表单重复提交的方法
在提交表单的时候,可能遇到网速等导致页面突然加载变慢,用户重复地点击提交按钮,将在数据库产生多条数据,导致不可控情况. 比如下面的情况就会导致表单重复提交: 点击提交按钮两次. 点击刷新按钮. 使用浏 ...
- Ajax防止重复提交
转:http://www.cnblogs.com/jinguangguo/archive/2013/05/20/3086925.html 谈谈防止重复点击提交 首先说说防止重复点击提交是什么意思. ...
- query 防止ajax重复提交
项目用到js了,首选jquery,能用库用库,原则. 碰到重复提交的问题,禁止住才行.百度google,还是Google给力. 知乎上有个高人,总结了四种,利用Jquery .post方法返回jqXH ...
- 关于Asp.Net中避免用户连续多次点击按钮,重复提交表单的处理
Web页面中经常碰到这类问题,就是客户端多次点击一个按钮或者链接,导致程序出现不可预知的麻烦. 客户就是上帝,他们也不是有意要给你的系统造成破坏,这么做的原因很大一部分是因为网络慢,点击一个操作之后, ...
- ajax防止重复提交请求1
ajax防止重复提交请求 A. 独占型提交 只允许同时存在一次提交操作,并且直到本次提交完成才能进行下一次提交. module.submit = function() { if (this.pro ...
- form表单重复提交,type=“button”和type=“submit”区别
公司测试提了一个项目后台在IE浏览器下(360,firefox就没问题)出现数据重复的问题,调试了好久终于发现问题所在,也不知道是谁写的代码,醉醉的.... 错误地点: <input type= ...
- Servlet中表单的重复提交
1.用户登录页面: ->设置一个UUID到session中 ->将UUID添加到隐藏域中,提交到服务器 <% //进入页面,设置一个UUID,将UUID添加到session中 Str ...
- 使用js控制表单重复提交(1加锁,2事件方式,3 EasyUI中解决表单重复提交)
方法一. var flag = true; $(function() { $("#interested").click(function() { beInterested(); } ...
- 一脸懵逼学习Struts数据校验以及数据回显,模型驱动,防止表单重复提交的应用。
1:Struts2表单数据校验: (1)前台校验,也称之为客户端校验,主要是通过Javascript编程的方式进行数据的验证. (2)后台校验,也称之为服务器校验,这里指的是使用Struts2通过xm ...
随机推荐
- 微信团队分享:Kotlin渐被认可,Android版微信的技术尝鲜之旅
本文由微信开发团队工程是由“oneliang”原创发表于WeMobileDev公众号,内容稍有改动. 1.引言 Kotlin 是一个用于现代多平台应用的静态编程语言,由 JetBrains 开发( ...
- Android优化指南
Android系统中GC内存泄漏的原因 主动回收内存System.gc();.getruntime.runtime.gc 导致内存泄漏主要的原因是,申请了内存空间而忘记了释放.如果程序中存在对无用对象 ...
- Eclipse 中构建 Maven 项目的完整过程 - 动态 Web 项目
进行以下步骤的前提是你已经安装好本地maven库和eclipse中的maven插件了(有的eclipse中已经集成了maven插件) 一.Maven项目的新建 1.鼠标右键---->New--- ...
- 来啊踩fastjson打印入参导致业务跑偏的坑
线上代码对日志的记录,重要性自不必说.但是怎样记录日志也是有讲究的! 日志可以直接在每个方法中进行日志记录,优点是想怎么记就怎么记,缺点是记日志的代码可能会超过你的业务代码,可读性急剧下降,这也是日志 ...
- Redis 搭建文档,备份及认证
wget http://download.redis.io/releases/redis-3.0.6.tar.gz为了方便管理,将Redis文件中的conf配置文件和常用命令移动到统一文件中[root ...
- editormd实现文章详情页面预览
继之前博客写了editmd.js(国内开源的一款前端Markdown框架)实现的写文章功能之后,本博客介绍使用editormd实现文章预览功能,之前博客链接:https://blog.csdn.net ...
- 一文了解Python中的判断语句
判断(if)语句 目标 开发中的应用场景 if 语句体验 if 语句进阶 综合应用 01. 开发中的应用场景 生活中的判断几乎是无所不在的,我们每天都在做各种各样的选择,如果这样?如果那样?…… 程序 ...
- java中的http请求的封装(GET、POST、form表单形式)
目前JAVA实现HTTP请求的方法用的最多的有两种:一种是通过HTTPClient这种第三方的开源框架去实现.HTTPClient对HTTP的封装性比较不错,通过它基本上能够满足我们大部分的需求,Ht ...
- 搭建gitlab本地服务
一本正经的搞事情 改变懒惰,成就心中的自己,并非难事 博客园 首页 新随笔 联系 管理 订阅 随笔- 40 文章- 0 评论- 5 gitlab服务部署及使用 目录 一.什么是gitlib ...
- Ansible系列之roles使用说明
roles(角色)介绍 ansible自1.2版本开始引入的新特性,用于层次性,结构化地组织playbook.roles能够根据层次型结构自动装载变量文件.tasks以及handlers等.要使用ro ...