Ng-click and ng-touch mobile device

Question

I have a cordova mobile app written in AngularJS. Adding ng-touch to my application makes some html behave incorrectly. One example of this problem is the strange behavior of a checkbox that does not mark the check when it is wrapped in an HTML element attached with ng-click. This works great on desktop / laptop computers, the problem is on mobile devices.

Example:

This does not work on mobile devices:

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

So far, this file is working correctly:

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

The strangest part is that when you remove the ng-touch module, it works as expected. Please help me, I tried to solve this problem for several hours.

Try to open this plunker on your mobile device: http://plnkr.co/edit/6LPeJP9QO6NMSpNuQqtQ?p=preview

Answer 1

I actually ran into this problem before, which I did to create another directive that mimics the click event to replace the ngTouch version of ng-click for this particular problem.

FORKED PLUNKER

DIRECTIVE

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