Fastclick.js 与 AngularJS 的集成

Posted 2023-02-19

【中文标题】Fastclick.js 与 AngularJS 的集成

【英文标题】：Fastclick.js integration with AngularJS

【发布时间】：2013-12-24 00:33:08

【问题描述】：

我正在构建一个 Cordova 应用程序，但点击响应时间很慢。

我 found Angular 的 angular-touch 插件（虽然它是为 Angular 1.2.0 设计的，但看起来它可能适用于旧版本的 Angular，因为它实际上只是一组指令）但是在尝试它时出来，我没有得到我想要的结果。点击仍然没有触发。

据我了解，fastclick.js 目前是 angular-touch 的更稳定替代品（因为 angular-touch 仍在开发中）。但是，我希望我的 ng-click 指令能够利用 fastclick。

如何将 fastclick.js 与 angular 集成 - 我可以只包含文件并初始化脚本，还是必须将 fastclick 行为包装在 ng-click 中（本质上是 angular-touch 对其第一方代码的作用） ?

注意：我的应用使用的是 Angular 1.0，因为它是在稳定版本之前构建的。

【问题讨论】：

如果点击时没有触发点击，那么您做错了。我用过ng-click 很多次，它总是很有魅力。也许给我们看一些简化的代码。

作为替代方案，您可以尝试：github.com/randallb/angular-hammer，它提供了将hammer.js 绑定到angular.js 的指令。

@TheHippo 抱歉，不清楚。点击正在触发，但在 300 毫秒延迟之后，这就是我的意思。这使得一切都相当迟钝。老实说，这对应用程序来说可能很好，但如果可能的话，我想把它做得更好。

【参考方案1】：

从this page：“Angular 方式”是到.run Angular JS 文件中的 FastClick 初始化程序。确保在 Angular 代码之前加载 fastclick.js 模块。

html：

<script src="js/fastclick.js"></script>
<script src="js/app.js"></script>
<script src="js/filters.js"></script>
<script src="js/controller.js"></script>

在 app.js 中：

app.run(function() 
    FastClick.attach(document.body);
);

【讨论】：

如果您将 FastClick 作为常量注入并使用 $document 服务，将会更加 Angular 友好:)

@gustavohenke 我不确定应该如何使用常量。

@Blazemonger 在可测试性方面，是的，因为 FastClick 是一个全局变量，所以你可以正确地模拟它，而不是在测试时做讨厌的黑客攻击。来源：github.com/johnpapa/angularjs-styleguide#style-y240

如果您不想在 Angular 上下文中使用全局变量，请使用 $window.FastClick.attach($window.document.body);

【参考方案2】：

这比我想象的要简单；我预计必须修改一些角度指令，但事实证明这只是一个嵌入式库。我将它包含在我的 Angular 库之前，并在我的 phonegap 应用程序中看到了即时结果（在根据 fastclick 文档调用 new FastClick 之后）。

到目前为止，我找不到这种方法的任何缺点。我认为document.ready-type 设置调用可能存在一些问题（而不是更多地集成到 Angular 中），但似乎没有任何时间问题或任何其他问题。

对于偶然发现这个问题的人来说，值得注意的是 - 我只使用点击功能；我相信 fastclick 公开了一些我没有用于这个项目的额外功能。

【讨论】：

您是否尝试在主控制器而不是 document.ready 上实例化 FastClick？

@HampusAhlgren 对于我的用例，我没有。但是，您也许可以将它实例化为 Angular 模块配置的一部分。如果你愿意，你可能可以在控制器中做到这一点，也许吧？为什么要问？

有谁知道 ionic 的this article 中提到的 angular 和 fastclick 之间的问题是什么？截至 2015 年 9 月，我还没有发现任何冲突。

显然 fastclick 不是由附加到元素的 ngClick 指令触发的