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 相关文章推荐
javascript通过class来获取元素实现代码
Feb 20 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
jquery实现的简单二级菜单效果代码
Sep 22 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 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
PHP-Java-Bridge使用笔记
2014/09/22 PHP
各种快递查询--Api接口
2016/04/26 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
基于node.js实现微信支付退款功能
2017/12/19 Javascript
vue实现通讯录功能
2018/07/14 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
python多线程扫描端口(线程池)
2019/09/04 Python
python 日志 logging模块详细解析
2020/03/31 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
python ETL工具 pyetl
2020/06/07 Python
python和php哪个容易学
2020/06/19 Python
基于opencv实现简单画板功能
2020/08/02 Python
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
大学生的四年学习自我评价
2013/12/13 职场文书
法律专业应届生自荐信范文
2014/01/06 职场文书
项目考察欢迎辞
2014/01/17 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
西柏坡导游词
2015/02/05 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android