angular ng-click防止重復提交實例
更新時間:2017年06月16日 08:22:14 作者:Cynthia嬈墨舊染
本篇文章主要介紹了angular ng-click防止重復提交實例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
方法一:點擊后,讓button的狀態(tài)變?yōu)閐isable
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事件,設置一定事件內(nèi)不能重復點擊
$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;
}]);
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
Angular項目過大時的合理拆分angular?split
這篇文章主要為大家介紹了Angular項目過大時的合理拆分angular?split示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-07-07
AngularJS使用ng-options指令實現(xiàn)下拉框
這篇文章主要介紹了AngularJS使用ng-options指令實現(xiàn)下拉框效果,ng-option指令使用也很簡單,下文具體給大家說明,對angularjs 下拉框知識感興趣的朋友一起看下吧2016-08-08
Angular.js與Bootstrap相結(jié)合實現(xiàn)手風琴菜單代碼
這篇文章主要介紹了Angular.js與Bootstrap相結(jié)合實現(xiàn)手風琴菜單的相關(guān)資料,需要的朋友可以參考下2016-04-04

