zoukankan      html  css  js  c++  java
  • 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;
            }]);
  • 相关阅读:
    justep w模型检查正常,编译出错
    php get post 发送与接收
    编译原理正则文本与有限状态机
    编译原理前端技术
    lucene早期版本基本概念
    golang panic和defer
    2021年1月阅读文章
    elasticsearch 中的fielddata 和 doc_values
    golang中的树
    elasticsearch中的wildcard
  • 原文地址:https://www.cnblogs.com/cynthia-wuqian/p/7018531.html
Copyright © 2011-2022 走看看