2014-09-12 16 views
5

Mam aplikację mobilną cordova napisaną w AngularJS. Dodanie aplikacji ng-touch do mojej aplikacji powoduje, że niektóre zachowania HTML nie działają poprawnie. Jednym z przykładów tego problemu jest dziwne zachowanie pola wyboru, które nie oznacza zaznaczenia, gdy jest zawinięte w element HTML z ng-click. Działa to doskonale na komputerach stacjonarnych/laptopach, problem pojawia się na urządzeniach mobilnych.ng-click i urządzenie mobilne ng-touch

przykład:

nie działa w urządzeniach przenośnych:

<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> 

Chociaż ten działa właściwie:

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

Najdziwniejsze jest to, że kiedy moduł ng dotykaniu usunięte, działa poprawnie zgodnie z oczekiwaniami. Pomóżcie mi, próbuję rozwiązać ten problem od kilku godzin.

Spróbuj otworzyć ten plunker na telefon komórkowy: http://plnkr.co/edit/6LPeJP9QO6NMSpNuQqtQ?p=preview

+0

Jeśli używasz jQuery Proponuję jQuery dotykowy poncz (http: //touchpunch.furf. com /) Ostatnio pracowałem nad mini-grą Którego kliknięcie/przeciągnięcie/upuszczenie i to BETA nie wymagało dotyku, ale samo dodanie tej biblioteki i robienie niczego innego sprawiło, że dotyk działa idealnie na wszystko. – GillesC

+0

dziękuję bardzo za to, ale myślę, że odpowiedź Ryeballara działa również dla mnie. – Drake105

+0

Haha tak po prostu sugestia, a nie odpowiedź plus i tak nie było tagu jQuery :) Wtyczka zasadniczo robi to samo, co odpowiedź, po prostu podłącz zdarzenia dotykowe do zdarzeń bezdotykowych. – GillesC

Odpowiedz

5

I rzeczywiście natknąć tego problemu wcześniej, co zrobiłem było stworzenie innej dyrektywy, które symulują zdarzenia click zastąpić ngTouch „s ng-click wersji dla tego konkretnego problemu.

FORKED PLUNKER

Dyrektywa

.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> 
+0

Dziękuję bardzo! – Drake105

+2

Hej Dzięki, 2016 Czy jest jakieś inne rozwiązanie, które znalazłeś? – user2936008

Powiązane problemy