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è)置間隔時間 $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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Angularjs為ng-click事件傳遞參數(shù)
- AngularJS基礎(chǔ) ng-click 指令示例代碼
- AngularJS的ng-click傳參的方法
- 詳解angularJS動態(tài)生成的頁面中ng-click無效解決辦法
- Angularjs 動態(tài)添加指令并綁定事件的方法
- AngularJS中directive指令使用之事件綁定與指令交互用法示例
- Angularjs中使用指令綁定點(diǎn)擊事件的方法
- AngularJs ng-change事件/指令的用法小結(jié)
- Angularjs 事件指令詳細(xì)整理
- Angular使用操作事件指令ng-click傳多個參數(shù)示例
相關(guān)文章
es6+angular1.X+webpack 實(shí)現(xiàn)按路由功能打包項(xiàng)目的示例
本篇文章主要介紹了es6+angular1.X+webpack 實(shí)現(xiàn)按路由功能打包項(xiàng)目的示例,具有一定的參考價值,有需要的可以了解一下2017-08-08angular報錯can't resolve all parameters&nb
這篇文章主要介紹了angular報錯can't resolve all parameters for []的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03詳解如何在Angular應(yīng)用中發(fā)起HTTP?302 redirect
這篇文章主要介紹了如何在Angular應(yīng)用中發(fā)起HTTP 302 redirect詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12angularjs使用gulp-uglify壓縮后執(zhí)行報錯的解決方法
下面小編就為大家分享一篇angularjs使用gulp-uglify壓縮后執(zhí)行報錯的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03Angular.js基礎(chǔ)學(xué)習(xí)之初始化
這篇文章主要介紹了Angular.js基礎(chǔ)學(xué)習(xí)之初始化的相關(guān)資料,AngularJS 啟動有兩種方式,一種是綁定初始化,自動加載,另外一種是手動初始化,文中介紹的很詳細(xì),需要的朋友可以參考下。2017-03-03AngularJs Using $location詳解及示例代碼
本文主要介紹AngularJs Using $location的知識資料,這里整理了相關(guān)的資料,及簡單示例代碼,有興趣的小伙伴可以參考下2016-09-09angularJs自定義過濾器實(shí)現(xiàn)手機(jī)號信息隱藏的方法
今天小編就為大家分享一篇angularJs自定義過濾器實(shí)現(xiàn)手機(jī)號信息隱藏的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10Angular2實(shí)現(xiàn)的秒表及改良版示例
這篇文章主要介紹了Angular2實(shí)現(xiàn)的秒表及改良版,結(jié)合實(shí)例形式分析 Angular2實(shí)現(xiàn)秒表功能的原理、操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2019-05-05