ng-click and ng-touch mobile device

Issue

I have a cordova mobile app written in AngularJS. Adding ng-touch in my application makes some html behaviour to not work properly. One example of this problem is the weird behaviour of a checkbox not marking check when it is wrapped in an HTML element attached with ng-click. This works perfectly on desktops/laptops, the problem appears on mobile devices.

Example:

This does not work in 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>

While this one works properly:

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

The weirdest part is that when the ng-touch module is removed, it works properly as expected. Please help me, I have been trying to solve this problem for a couple of hours now.

Try opening this plunker on mobile: http://plnkr.co/edit/6LPeJP9QO6NMSpNuQqtQ?p=preview

Solution

I have actually come across this problem before, what I did was to create another directive that simulates a click event to replace ngTouch's ng-click version for that specific 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>

Answered By - ryeballar