ipad - 如何在 iPad 上使用 fastClick + AngularJS

Question

使用 AngularJS 在 iPad 上单击 ng-click 时有延迟 我有需要编写的生成指令

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

我强烈建议不要自己实施这样的指令 - 有许多边缘情况可能会中断（鬼点击等）。查看上面引用的代码，了解更多需要处理的边缘情况示例。