javascript - ng-click 和 ng-touch 移动设备

Question

我有一个用 AngularJS 编写的 cordova 移动应用程序。在我的应用程序中添加 ng-touch 会使某些 html 行为无法正常工作。这个问题的一个例子是当一个复选框被包装在一个带有 ng-click 的 HTML 元素中时，它没有标记检查的奇怪行为。这在台式机/笔记本电脑上完美运行，问题出现在移动设备上。

例子:

这不适用于移动设备:

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

虽然这个可以正常工作:

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

最奇怪的是，当 ng-touch 模块被移除时，它可以正常工作。请帮助我，我已经尝试解决这个问题几个小时了。

尝试在手机上打开这个插件:http://plnkr.co/edit/6LPeJP9QO6NMSpNuQqtQ?p=preview

Answer 1

我之前确实遇到过这个问题，我所做的是创建另一个模拟点击事件的指令来替换 ngTouch 的 ng-click 版本具体问题。

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

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>