Page 373 - AngularJS权威教程

26.2 交互 353

 cancel 19
cancel事件会调用touchcancel事件或者在start事件之后开始滚动时触发。

例如，我们可以创建一个指令，在可以控制投影仪的屏幕上的幻灯片之间滑动。为了在手机 20
设备上处理滑动操作，可以使用$swipe服务来处理如何显示UI层的自定义逻辑。
angular.module('myApp') 21
.directive('mySlideController', ['$swipe', function($swipe) {
return {
restrict: 'EA', 22
link: function(scope,ele,attrs,ctrl) {
var startX, pointX;
$swipe.bind(ele, {
'start': function(coords) { 23
startX = coords.x;
pointX = coords.y;
}, 24
'move': function(coords) {
var delta = coords.x - pointX;
// ... 25
},
'end': function(coords) {
// ...
}, 26
'cancel': function(coords) {
// ...
} 27
});
}
}
}]); 28

26.2.4 angular-gestures和多点触控手势 29

angular-gestures是一个Angular模块，它让我们可以处理Angular应用中的多点触控行为。
①
它基于非常流行并经过良好测试的Hammer.js 库。 30
Hammer.js库提供了一系列常见的触屏事件：
31
 Tap；
 DoubleTap；
 Swipe； 32
 Drag；
 Pinch； 33
 Rotate。

angular-gestures允许我们在使用Angular指令时使用这些事件。例如，以下所有指令都是 34
可用的：
 hmDoubleTap: 'doubletap'； 35
 hmDragStart: 'dragstart'；
—————————— 36
① http://eightmedia.github.io/hammer.js/