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

方法一：

点击后，让button的状态变为disable

js指令：

rush: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:

代码如下:

disable="next()">下一步 //把 ng-click 改为指令click-and-disable

方法二：

在app.config里面，重写ng-click事件，设置一定事件内不能重复点击

rush:js;">

$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 <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abled = false;
    function onClick(evt) {
      if (<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abled) {
        evt.preventDefault();
        evt.stopImmediatePropagation();
      } else {
        <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abled = true;
        $timeout(function () { <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abled = false; },delay,false);
      }
    }
    //  s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.$on('$destroy',function () { iElement.off('click',onClick); });
    element.on('click',onClick);

    return original(element,transclude);
  };
  return $delegate;
}]);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。