防止在angularjs中单击按钮两次

时间:2023-01-19 15:27:57

I am working in angularjs and am new to it, I have made an app using this.

我在angularjs工作,我是新手,我用这个做了一个应用程序。

There are a few pages in my app, now my problem is i am having two buttons which navigate to other pages, but my issue is when i click on a button (span), it opens the same page twice.

我的应用程序中有几页,现在我的问题是我有两个按钮导航到其他页面,但我的问题是当我点击一个按钮(跨度)时,它会打开两次相同的页面。

Can anyone please help me how to solve this? My code is as below:

任何人都可以帮我解决这个问题吗?我的代码如下:

javascript

JavaScript的

  $scope.foo = function() {
        if ($scope.filterflg !== "1" ) {
            $scope.filterflg = "1";
             $scope.disabled = true;


            gallery.pushPage("filter.html", {
                params: FkCategory
            });

            $timeout(function() {
                console.log("====timeout occured===");
                $scope.filterflg = "0";
                  $scope.disabled = false;
            }, 3000);
        }
    };

html

HTML

<ons-button  id="test1" class="toolbar-button--quiet navigation-bar__line-height"  ng-click="isProcessing=true;foo()" ng-model ="filterflg"
         style="border: none; padding: 0 5px 0 0; margin-right:7px ;">
            <i class="ion-android-options" style="font-size:24px; color: #FFFFFF;"></i>
        </ons-button>

I have wasted 10 days on this issue, hope some buddy will help me to save my job..! :(

我在这个问题上已经浪费了10天,希望有些伙伴会帮我救我的工作..! :(

3 个解决方案

#1


1  

convert the span to a button element and disable that button without $timeout just after first click

将span转换为按钮元素,并在第一次单击后立即禁用该按钮而不使用$ timeout

 $scope.foo = function() {
        just simply 
        $scope.disabled = false;
        // Your other code 


 };

or use a flag to check page is already open or not will solve your problem

或使用标志检查页面是否已打开将解决您的问题

 $scope.isFilteropen = false;

 $scope.foo = function() {
     if ($scope.isFilteropen == false) {
         $scope.isFilteropen = true;
        // your other code 
     }
 };

#2


3  

ng-disabled doesn't work on span. It only works for input or button types.

ng-disabled对span不起作用。它仅适用于输入或按钮类型。

you have two options -

你有两个选择 -

  1. convert the span to a button element

    将span转换为按钮元素

  2. use a variable like $scope.isProcessing to wrap the foo() function.

    使用像$ scope.isProcessing这样的变量来包装foo()函数。

    $scope.foo = function() {

    $ scope.foo = function(){

    if (!$scope.isProcessing) {     
        //...       
        $timeout(function() {
             console.log("====timeout occured===");
             $scope.filterflg = "0";
             $scope.disabled = false;
             $scope.isProcessing = false;        
        }, 3000);
     }
    

    };

    };

html

HTML

<span ng-click="isProcessing=true;foo()"></span>

#3


0  

Try this one,

试试这个,

<span class="toolbar-button--quiet navigation-bar__line-height" ng-disabled="disabled" ng-click="disabled=true;foo();disabled=false;" ng-model ="filterflg"> </span>

And remove your timer from the function Foo().

并从函数Foo()中删除您的计时器。

#1


1  

convert the span to a button element and disable that button without $timeout just after first click

将span转换为按钮元素,并在第一次单击后立即禁用该按钮而不使用$ timeout

 $scope.foo = function() {
        just simply 
        $scope.disabled = false;
        // Your other code 


 };

or use a flag to check page is already open or not will solve your problem

或使用标志检查页面是否已打开将解决您的问题

 $scope.isFilteropen = false;

 $scope.foo = function() {
     if ($scope.isFilteropen == false) {
         $scope.isFilteropen = true;
        // your other code 
     }
 };

#2


3  

ng-disabled doesn't work on span. It only works for input or button types.

ng-disabled对span不起作用。它仅适用于输入或按钮类型。

you have two options -

你有两个选择 -

  1. convert the span to a button element

    将span转换为按钮元素

  2. use a variable like $scope.isProcessing to wrap the foo() function.

    使用像$ scope.isProcessing这样的变量来包装foo()函数。

    $scope.foo = function() {

    $ scope.foo = function(){

    if (!$scope.isProcessing) {     
        //...       
        $timeout(function() {
             console.log("====timeout occured===");
             $scope.filterflg = "0";
             $scope.disabled = false;
             $scope.isProcessing = false;        
        }, 3000);
     }
    

    };

    };

html

HTML

<span ng-click="isProcessing=true;foo()"></span>

#3


0  

Try this one,

试试这个,

<span class="toolbar-button--quiet navigation-bar__line-height" ng-disabled="disabled" ng-click="disabled=true;foo();disabled=false;" ng-model ="filterflg"> </span>

And remove your timer from the function Foo().

并从函数Foo()中删除您的计时器。