方法一: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; 两秒,两秒之类不能再次点击。