javascript - ngTouch 的 ngClick 阻止复选框和视频在大多数移动设备上工作

Question

我目前正在试用 ngTouch的 ng-click我的应用程序中的指令，它似乎破坏了大多数移动设备(Android/iOS)中的一些基本功能。包含在具有 ng-click 的 html 元素中的复选框和视频ngTouch 时指令不起作用作为依赖项包含在内。

这个 plunker 是 here 。至于查看问题，可以用 Google Chrome's Emulation 模拟问题的功能，我建议在 plunker's embededd view 上查看它.

在 ngTouch 时考虑此标记作为对移动设备的依赖项包含在内:

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

您必须点击视频或复选框几次(有时更多)才能选中复选框或播放视频。删除 ng-click指令或删除 ngTouch然而，应用程序中的依赖性解决了问题，但我想使用 ngTouch指令和服务。

如果有人能向我解释这一点或指出正确的方向，我们将不胜感激。

Answer 1

我通过创建另一个类似于原始 ngClick 指令的指令解决了这个问题，并在父元素上使用它，而不是使用 ngClick。

UPDATED PLUNKER

指令

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