NG-点击NG-触摸移动设备 [英] ng-click and ng-touch mobile device

问题描述

我已经写在AngularJS一个科尔多瓦移动应用程序。在我的应用程序添加NG点触控，使一些HTML的行为无法正常工作。这个问题的一个例子是，当它被包裹在附NG-点击一个HTML元素标记不检查一个复选框的怪异行为。这工作完全在台式机/笔记本电脑，出现在移动设备上的问题。

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.

例如：

这不会在移动设备上工作：

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>

最奇怪的是，当NG-触控模块被删除，它工作正常预期。请帮我，我一直在努力，现在解决这个问题了几个小时。

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.

尝试在手机打开此plunker：<一href=\"http://plnkr.co/edit/6LPeJP9QO6NMSpNuQqtQ?p=$p$pview\">http://plnkr.co/edit/6LPeJP9QO6NMSpNuQqtQ?p=$p$pview

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

推荐答案

我其实遇到这个问题之前，我所做的就是创建另一个指令，模拟点击事件来代替 ngTouch 的 NG-点击版本针对特定的问题。

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.

分叉PLUNKER

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>

这篇关于NG-点击NG-触摸移动设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！