这里有新鲜出炉的 AngularJS 教程,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
本篇文章主要介绍了 angular ng-click 防止重复提交实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
方法一:点击后,让 button 的状态变为 disable
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 事件,设置一定事件内不能重复点击
- $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;
- }]);
来源: http://www.phperz.com/article/17/0815/338630.html