简介
RyanMullins-angular-hammer 是一个基于 Hammer.js 的 AngularJS 指令库，它可以轻松地将 Hammer.js 的手势事件集成到 AngularJS 应用中。如果你想开发跨平台的交互式 Web 应用程序，这个库就是你的不二之选。
安装
你需要先安装 Node.js 和 npm，然后在命令行中执行以下命令：
npm install --save angular angular-hammer hammerjs ryanmullins-angular-hammer
这将会自动安装并引入 RyanMullins-angular-hammer 及其所依赖的 Angular、Hammer.js 等包。
使用
引入模块
在应用程序的主模块中引入 RyanMullins-angular-hammer 模块：
angular.module('myApp', ['hmTouchEvents']);添加指令
在 HTML 文件中添加指令：
<div hm-tap="onTap()" hm-press="onPress()" hm-swipe="onSwipe()" hm-drag="onDrag()" hm-release="onRelease()"> Tap, Press, Swipe, Drag or Release Me! </div>
在上面的示例中，我们为 div 元素添加了五个指令：hm-tap、hm-press、hm-swipe、hm-drag 和 hm-release，分别对应着 Hammer.js 中的 tap、press、swipe、drag 和 release 手势事件。
实现事件处理函数
在 AngularJS 控制器中实现指令所绑定的事件处理函数：
-- -------------------- ---- -------
-----------------------
--------------------- ---------------- -
------------ - ---------- -
---------------- ----- -------------
--
-------------- - ---------- -
------------------ ----- -------------
--
-------------- - ---------- -
------------------ ----- -------------
--
------------- - ---------- -
----------------- ----- -------------
--
---------------- - ---------- -
-------------------- ----- -------------
--
---在上面的示例中，我们为每个事件添加了一个简单的 console.log 输出语句，你也可以根据需要来编写自己的事件处理逻辑。
指令列表
以下是 RyanMullins-angular-hammer 支持的所有指令及其对应的 Hammer.js 事件名称：
| 指令名 | 对应事件 |
|---|---|
| hm-tap | tap |
| hm-doubletap | doubletap |
| hm-press | press |
| hm-pinch | pinch |
| hm-pinchin | pinchin |
| hm-pinchout | pinchout |
| hm-rotate | rotate |
| hm-swipe | swipe |
| hm-swipeup | swipeup |
| hm-swipedown | swipedown |
| hm-swipeleft | swipeleft |
| hm-swiperight | swiperight |
| hm-drag | drag |
| hm-dragup | dragup |
| hm-dragdown | dragdown |
| hm-dragleft | dragleft |
| hm-dragright | dragright |
| hm-release | release |
总结
RyanMullins-angular-hammer 为我们提供了一种简单而有效的方式来将 Hammer.js 的手势事件集成到 AngularJS 应用程序中。通过在 HTML 文件中添加指令，并在控制器中实现对应的事件处理函数，你可以轻松地创建具有丰富交互体验的 Web 应用程序。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/37979