方法一: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; 兩秒,兩秒之類不能再次點擊。