angular ng-click防止重復(fù)提交實(shí)例
方法一:點(diǎ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事件,設(shè)置一定事件內(nèi)不能重復(fù)點(diǎn)擊
$provide.decorator('ngClickDirective',['$delegate','$timeout', function ($delegate,$timeout) { //記得在config里注入$provide
var original = $delegate[0].compile;
var delay = 500;//設(shè)置間隔時(shí)間
$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)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Angularjs為ng-click事件傳遞參數(shù)
- AngularJS基礎(chǔ) ng-click 指令示例代碼
- AngularJS的ng-click傳參的方法
- 詳解angularJS動(dòng)態(tài)生成的頁面中ng-click無效解決辦法
- Angularjs 動(dòng)態(tài)添加指令并綁定事件的方法
- AngularJS中directive指令使用之事件綁定與指令交互用法示例
- Angularjs中使用指令綁定點(diǎn)擊事件的方法
- AngularJs ng-change事件/指令的用法小結(jié)
- Angularjs 事件指令詳細(xì)整理
- Angular使用操作事件指令ng-click傳多個(gè)參數(shù)示例
相關(guān)文章
Angular項(xiàng)目過大時(shí)的合理拆分angular?split
這篇文章主要為大家介紹了Angular項(xiàng)目過大時(shí)的合理拆分angular?split示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
詳解Angular項(xiàng)目中共享模塊的實(shí)現(xiàn)
本文主要介紹了Angular的共享模塊的實(shí)現(xiàn),對(duì)此感興趣的同學(xué),可以實(shí)驗(yàn)一下2021-05-05
AngularJS發(fā)送異步Get/Post請(qǐng)求方法
今天小編就為大家分享一篇AngularJS發(fā)送異步Get/Post請(qǐng)求方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
angular 動(dòng)態(tài)組件類型詳解(四種組件類型)
這篇文章給大家講解四種組件類型,非常不錯(cuò),具有參考借鑒價(jià)值,對(duì)angular 動(dòng)態(tài)組件類型感興趣的朋友參考下吧2017-02-02
AngularJS使用ng-options指令實(shí)現(xiàn)下拉框
這篇文章主要介紹了AngularJS使用ng-options指令實(shí)現(xiàn)下拉框效果,ng-option指令使用也很簡單,下文具體給大家說明,對(duì)angularjs 下拉框知識(shí)感興趣的朋友一起看下吧2016-08-08
Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)手風(fēng)琴菜單代碼
這篇文章主要介紹了Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)手風(fēng)琴菜單的相關(guān)資料,需要的朋友可以參考下2016-04-04

