Page 371 - AngularJS权威教程

26.2 交互 351

无论使用哪种方式，都需要在你的index.html中以脚本的方式引入这个库： 19

<script src="/bower_components/angular-touch/angular-touch.js"></script>
最后，还需要以依赖的方式在你的应用中引入ngTouch： 20

angular.module('myApp', ['ngTouch']);
21
现在，就可以开始使用ngTouch库了。

26.2.2 ngTouch 22

处理点击事件时，移动设备浏览器与桌面浏览器的工作方式略有不同。移动设备首先会检测
到一个tap事件，然后等待300毫秒去检测其他点击（tap）事件（比如，等待发现用户是否在双 23
击设备）。在这个延时之后，浏览器才会触发点击事件。
24
这一延迟可能让人感觉到应用反应非常迟钝。除了检测click事件，你也可以检测touch事件。
ngTouch库通过ng-click指令为我们完美地处理了这一功能，同时它还负责调用正确的点击
事件。也就是说会调用所谓的快速点击事件。 25

在快速点击被调用之后，才会调用浏览器的延时点击，这会触发一个双击行为。 26
ngTouch负责在ng-click事件上移除这个浏览器延时。

在移动设备上的浏览器中使用ngClick指令的方式，与在桌面浏览器中的方式完全相同： 27
<button ng-click="save()">Save</button>

ngTouch还引入了两个新指令：swipe指令。swipe指令允许我们捕获用户滑屏行为，不论是 28
从左侧还是往右侧。swipe指令非常有用，它可以让用户通过滑动浏览器相册，或者导航到应用
的其他部分。 29

ngSwipeLeft指令检测元素从右向左滑动，而ngSwipeRight指令检测元素从左向右滑动。
30
ngSwipe*指令有用的特性之一便是，它们既能用于基于touch事件的设备，也能用
于鼠标点击和拖拽。
31
使用ngSwipe*指令很容易。比方说有一个邮件列表，我们希望它如同流行的手机邮件客户端
MailboxApp一样，能够显示针对每封邮件的操作。
32
在这个元素列表上使用swipe指令时可以很容易实现这一功能。在显示邮件列表时，你可以
在特定的邮件条目上启用某个方向的滑屏，来启动显示行为。
33
在显示邮件条目时，可以从反方向实现隐藏行为，如图26-1所示。

<ul> 34
<li ng-repeat="mail in emails">
<div ng-show="!mail.showActions" ng-swipe-left="mail.showActions=true">
<div class="from">
From: <span>{{ mail.from }}</span> 35
</div>
<div class="body">
{{ mail.body }} 36
</div>