$ di portata chiamata via ng-clic: eseguiti due volte da IE

Question

Nel mio controller:

$scope.homeAction = function() { 
    console.log("HomeAction"); 
}; 

A mio avviso:

<button ng-click="homeAction()">call homeAction()</button> 

Cliccando sul pulsante, il metodo viene eseguito come previsto dal Chrome e Firefox, ma IE lo esegue due volte. Qualche idea del perché?

Ecco un plunker che riproduce il problema: http://plnkr.co/edit/pedZKjIVGDAYfMl0ZphJ.

Answer 1

Basta aggiungere type="button" al pulsante e dovrebbe essere risolto. Il comportamento predefinito è submit e apparentemente questo incasina il tuo codice.

<ion-view title="Home"> 

    <ion-content padding="true"> 
    <button type="button" ng-click="homeAction()" class="button button-block button-positive">call homeAction()</button> 
    </ion-content> 

</ion-view> 

Answer 2

Sembra essere correlato alla gestione degli eventi <button> su Internet Explorer. Facendolo clic, vengono inviati 2 eventi: MouseEvent e PointerEvent, il che spiega perché lo homeAction viene chiamato due volte.

La soluzione più semplice sarebbe quella di cambiare l'elemento <button> ad un altro elemento DOM (cioè <a> o <span>)

versione aggiornato tramite un elemento <a>http://plnkr.co/edit/Nn8CF7TnDKqsJA3unsp6

Un'altra soluzione potrebbe essere quella di verificare quale tipo di evento è spedito e consentire solo MouseEvents. Puoi farlo passando l'evento $ sul tuo HomeAction e verifica l'esistenza della proprietà pointerType (che è disponibile solo su TouchEvents). Un esempio su plnkr: http://plnkr.co/edit/RmVHT1Pf2IeCNdmDH51T

$scope.homeAction = function($event) { 
    if ($event.originalEvent.pointerType) { 
     //PointerEvent, don't do anything 
     return; 
    } 

    console.log("HomeAction"); 
};