如何在iPad中使用fastClick + AngularJS

Question

在使用AngularJS的iPad上使用ng-click单击时会有延迟，因为我需要编写generate指令

my_app.directive 'touch', ->
  (scope, e, attr) ->
    e.fastClick (e) ->
      scope.$apply attr.fastClick

但是它并不知道fastClick是什么，即使我已经在我的应用程序中包含了它。我认为它需要被创建为服务，然后注入到我的指令中，但是如何创建呢？

Answer 1

以防其他人发现这一点，谁不使用咖啡脚本，这里是转换

 app.directive("ngTap", function() {
  return function($scope, $element, $attributes) {
    var tapped;
    tapped = false;
    $element.bind("click", function() {
      if (!tapped) {
        return $scope.$apply($attributes["ngTap"]);
      }
    });
    $element.bind("touchstart", function(event) {
      return tapped = true;
    });
    $element.bind("touchmove", function(event) {
      tapped = false;
      return event.stopImmediatePropagation();
    });
    return $element.bind("touchend", function() {
      if (tapped) {
        return $scope.$apply($attributes["ngTap"]);
      }
    });
  };
});

这是gfTop，因为它的样本是“好电影”应用。您可以随意将其更改为您喜欢的任何内容。

还要注意，您必须将所有的“ng-click”更改为“gfTap”。

更新:处理点击和点击事件。

Answer 2

在没有外部库的情况下实现你自己的点击指令是非常简单的。我建议你这样做。

Goodfilms在他们关于AngularJS移动应用程序的博客文章中对此进行了讨论：http://goodfil.ms/blog/posts/2012/08/13/angularjs-and-the-goodfilms-mobile-site-part-1/

这是他们的点击代码(也是在Coffeescript中)，直接来自博客帖子：

app.directive 'gfTap', ->
  (scope, element, attrs) ->
    tapping = false
    element.bind 'touchstart', -> tapping = true
    element.bind 'touchmove', -> tapping = false
    element.bind 'touchend', -> scope.$apply(attrs['gfTap']) if tapping

Answer 3

AngularJS 1.1.5附带了一个内置的处理触摸事件的ng-click指令。

文档：http://code.angularjs.org/1.1.5/docs/api/ngMobile.directive:ngClick

来源：https://github.com/angular/angular.js/blob/master/src/ngMobile/directive/ngClick.js

我强烈建议不要自己实现这样的指令--有很多边缘情况可能会崩溃(虚幻点击等)。