angular ng-click防止重复提交实例


Posted in Javascript onJune 16, 2017

方法一:点击后,让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;
    }]);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 #Javascript
vue实现全选、反选功能
Nov 17 #Javascript
vue中将网页打印成pdf实例代码
Jun 15 #Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 #Javascript
Angularjs为ng-click事件传递参数
Jun 15 #Javascript
详解原生js实现offset方法
Jun 15 #Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 #Javascript
You might like
杏林同学录(六)
2006/10/09 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
浅谈javascript中的call、apply、bind
2016/03/06 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
Python简单日志处理类分享
2015/02/14 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
python实现发送邮件功能代码
2017/12/14 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
逻辑链路控制协议
2016/10/01 面试题
适用于所有创业者的创业计划书
2014/02/05 职场文书
责任书范本
2014/08/25 职场文书
国博复兴之路观后感
2015/06/02 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js