Heim  >  Artikel  >  Web-Frontend  >  Angular NG-Click verhindert die wiederholte Übermittlung von Instanzen

Angular NG-Click verhindert die wiederholte Übermittlung von Instanzen

零下一度
零下一度Original
2017-06-24 14:32:131683Durchsuche

Methode 1: Ändern Sie nach dem Klicken den Status der Schaltfläche, um sie zu deaktivieren

js-Befehl:

.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
<br>

Methode 2: Schreiben Sie in app.config das ng-click-Ereignis neu und legen Sie ein bestimmtes Ereignis fest, das nicht möglich ist wiederholt werden. Klicken Sie auf

$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;
        }]);

Das obige ist der detaillierte Inhalt vonAngular NG-Click verhindert die wiederholte Übermittlung von Instanzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn