ngTouch's ngClick prevents checkboxes and videos from working in most mobile devices

Question

I am currently trying out ngTouch's ng-click directive in my application and it seems to break some basic functionality in most mobile devices, (Android / iOS). The checkbox and videos that are wrapped in an html element that has an ng-click directive does not work when ngTouch is included as a dependency.

The plunker is here. As for viewing the problem, you can use Google Chrome's Emulation functionality to emulate the problem, I advise viewing it on plunker's embededd view.

Consider this markup when ngTouch is included as a dependency on mobile devices:

<div ng-controller="AppController"  ng-click="doSomethingAwesome()">
  <input type="checkbox" id="chk-1">
  <label for="chk-1">This checkbox and video does not work</label>

  <video width="320" height="240" controls>
    <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
    <source src="http://www.w3schools.com/tags/movie.ogg" type="video/ogg">
    Your browser does not support the video tag.
  </video>
</div>

You have to click the video or checkbox a couple times(sometimes a lot more) just to mark the checkbox check or to play the video. Removing the ng-click directive or removing the ngTouch dependency in the application however, solves the problem, but I want to use ngTouch directives and services as well.

If anyone could explain this to me or point me in the right direction it would be greatly appreciated.

Answer 1

I solved the problem by creating another directive that is similar to the original ngClickdirective, and use that on the parent element, instead of using ngClick.

UPDATED 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();
        });
      };
    }
  };
});