AngularJS ng-click fires twice

Question

I am using ng-click and it fires twice when I apply it to SPAN tag.

HTML

        
                      

              相关标签:
       
      

Answer 1

I have handled it by following code

HTML :

<div>
    <ui>
        <li>
            <button class="Button" ng-disabled="self.desableSubmitButton" ng- 
            click="self.SubmitClick($event)">Submit</button>
        </li>
    </ui> 
</div>

Angular 1.0 Controller :

_self.SubmitClick = function(event){   
     _self.desableSubmitButton = true; //disable submit button
     event.preventDefault();
     event.stopPropagation();

     setTimeout(funtion() {
       _self.desableSubmitButton = false; //enable submit button after timeout
           if(_self.$scope.$$phase != '$apply' || _self.$scope.$$phase != '$digest'){
             _self.$scope.$digest();
             }
      }, 1000);//other Code logic
}

Answer 2

You might have a ng-click inside a form container using a ng-submit. In that case, add type="button" to all your using ng-click.

Answer 3

I'm a bit of a dummy and had this:

<li data-shape="amethyst" ng-click="toggleGem('amethyst')">
    <label></label>
    <i class="amethyst"></i>Amethyst
    <input type="checkbox" name="gem_type" id="gem-amethyst" value="amethyst" />
</li>

The click event was triggering twice. I moved the ng-click to the label element and it's working as expected.

<li data-shape="amethyst">
    <label ng-click="toggleGem('amethyst')"></label>
    <i class="amethyst"></i>Amethyst
    <input type="checkbox" name="gem_type" id="gem-amethyst" value="amethyst" />
</li>

Answer 4

This situation may be caused by lacking the ngTouch in Angular.

Event if the ngTouch is loaded, the bug in ngTouch and ngClick before Angular 1.5.0 may occur. It results from the ngClick being triggered by pointerup and mouseUp in Chrome for Desktop on device toolbar or mobile device.

Answer 5

I don't know what was the reason this happened, but I had to use event.stopPropagation(); inner my JavaScript function.

HTML

<button class="button" ng-click="save($event)">Save</button>

JAVASCRIPT

function save(event) {
    event.stopPropagation();
}

Answer 6

elements wrapped one another, and this can cause trigger event twice or more.

So i used a simple CSS trick for this solution :

.off{
   pointer-events:none;
}

and apply it to an element correspond to click event.