$ method über ng-Klick aufgerufen Anwendungsbereich: ausgeführt zweimal durch IE

Question

In meinem Controller:

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

Aus meiner Sicht:

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

Wenn die Schaltfläche klicken, wird das Verfahren wie erwartet ausgeführt durch Chrome und Firefox, aber IE führt es zweimal aus. Irgendeine Idee warum?

Hier ist ein Plotter, der das Problem reproduziert: http://plnkr.co/edit/pedZKjIVGDAYfMl0ZphJ.

Answer 1

Nur type="button" auf Ihre Schaltfläche hinzufügen, und es soll festgelegt werden. Das Standardverhalten ist submit und das scheint mit deinem Code zu tun zu haben.

<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

Es scheint mit der <button> Ereignisbehandlung in Internet Explorer verwandt zu sein. Wenn Sie darauf klicken, werden zwei Ereignisse ausgelöst: MouseEvent und PointerEvent. Dies erklärt, warum homeAction zweimal aufgerufen wird.

wäre die einfachste Lösung, um die <button> Element zu einem anderen DOM-Element (dh <a> oder <span>)

Aktualisierte Version unter Verwendung eines <a> Element http://plnkr.co/edit/Nn8CF7TnDKqsJA3unsp6

eine andere Lösung zu ändern sein, wäre zu prüfen, welche Art von Ereignis ist versandt und nur erlaubt MouseEvents. Sie können dies tun, indem Sie das $ -Ereignis an Ihre HomeAction übergeben und das Vorhandensein der Eigenschaft pointerType überprüfen (die nur bei TouchEvents verfügbar ist). Ein Beispiel auf plnkr: http://plnkr.co/edit/RmVHT1Pf2IeCNdmDH51T

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

    console.log("HomeAction"); 
};