ng-clic e ng-touch dispositivo mobile

Question

ho un app mobile Cordova scritto in AngularJS. Aggiungendo ng-touch nella mia applicazione, alcuni comportamenti html non funzionano correttamente. Un esempio di questo problema è il comportamento strano di una casella di controllo che non contrassegna il controllo quando è racchiuso in un elemento HTML collegato con ng-clic. Funziona perfettamente su desktop/laptop, il problema appare sui dispositivi mobili.

Esempio:

Questo non funziona nei dispositivi mobili:

<div ng-click="alertSomething()"> 
    <input type="checkbox" ng-model="data" name="data" id="data" /> 
    <label for="data">This checkbox needs to be pressed a couple of times before it is marked as checked 
    in any mobile device.</label> 
    </div> 

Mentre questo funziona correttamente:

<input type="checkbox" ng-model="anotherData" name="anotherData" id="anotherData" /> 
    <label for="anotherData">This checkbox responds correctly on mobile</label> 

La parte più strana è che quando il modulo ng-touch è rimosso, funziona correttamente come previsto. Per favore aiutami, sto cercando di risolvere questo problema da un paio d'ore.

Prova ad aprire questo plunker sul mobile: http://plnkr.co/edit/6LPeJP9QO6NMSpNuQqtQ?p=preview

Answer 1

Ho effettivamente incontrato questo problema prima, quello che ho fatto è stato quello di creare un'altra direttiva che simula un evento click per sostituire ng-click versione ngTouch s' per questo specifico problema.

FORKED PLUNKER

DIRETTIVA

.directive('basicClick', function($parse, $rootScope) { 
    return { 
    compile: function(elem, attr) { 
     var fn = $parse(attr.basicClick); 
     return function(scope, elem) { 
     elem.on('click', function(e) { 
      fn(scope, {$event: e}); 
      scope.$apply(); 
     }); 
     }; 
    } 
    }; 
}); 

HTML

<div basic-click="alertSomething()"> 
    <input type="checkbox" ng-model="data" name="data" id="data" /> 
    <label for="data">This checkbox needs to be pressed a couple of times before it is marked as checked 
    in any mobile device.</label> 
    </div>