zoukankan      html  css  js  c++  java
  • angular ng-click防止重复提交

    方法一:directive.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

                <div class="form-group mt30">
                    <button class="btn btn-search col-md-offset-5" click-and-disable="sendNews()"> 发 布</button>
                    <button class="btn btn-clear" type="reset" ng-click="editorReset()"> 重 置</button>
                </div>

     方法二:重写ng-click 指令

    app.js

    sxApp.config(['$provide', function ($provide) {
        $provide.decorator('ngClickDirective',['$delegate','$timeout', function ($delegate,$timeout) {
            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;
        }]);
    }]);

    【注】 var delay = 500; 时间间隔设置为500太快,测试的话可以设置为 var delay = 2000;  两秒,两秒之类不能再次点击。

  • 相关阅读:
    工业网络的物理隔离与数据采集
    从勒索软件到工控系统网络安全
    数据结构导论之第五章图
    数据结构导论之第六章查找表
    数据结构导论之第七章排序
    数据结构导论之第三章(栈、队列、数组)
    第八章、网络安全基础
    第七章、无线与移动网络
    第六章、物理层
    第五章、数据链路层与局域网
  • 原文地址:https://www.cnblogs.com/miny-simp/p/8026690.html
Copyright © 2011-2022 走看看