Page 375 - AngularJS权威教程

26.3 Cordova 中的原生应用程序 355

比方说你想允许用户旋转，收缩和放大相册中的照片。就可以使用Hammer.js库来处理这些 19
功能。
这里有一个例子，我们将只为元素的双击操作设置一个随机的变换。要做到这一点，需要使 20
用hm-tap指令来设置HTML。

<div id="photowrapper"> 21
<div class="cardProps" hm-taps="tapped($event)">
<div class="tradingcard">
<img src="/img/ari.jpeg" alt="" />
<span>Ari</span> 22
</div>
<div class="tradingcard">
<img src="/img/nate.jpeg" alt="" /> 23
<span>Nate</span>
</div>
</div> 24
</div>
这里除了有一个名为hm-tap的指令之外，实际上HTML中并没有什么非常特别的东西。当有
人点击图片时，angular-gestures指令会处理发生的事情。 25

Hammer.js指令也可以接受Angular表达式，因此你可以在表达式内部调用函数或者
执行操作（比如ng-click）以及使用Hammer.js选项。 26

在上面的例子中，调用了定义在$scope对象上的tapped()函数。我们将这个函数定义为：
27
$scope.tapped = function($event) {
var ele = $event.target;
var x = Math.floor(Math.random() * 200) + 1, 28
y = Math.floor(Math.random() * 100) + 1,
z = Math.flooe(Math.random() * 6) + 1,
rot = Math.floor(Math.random() * 360) + 1; 29
$(ele).css({
'transform': "translate3d(" + x + "px," + y + "px," + z + "px)" + "rotate(" + rot +
"deg)"
}); 30
};

angular-gestures库通过提供一个叫做$event的特殊参数让我们能够访问事件对象。可以 31
使用事件对象的target属性（$event.target）确定用户点击的是哪个元素，然后可以在元素上
疯狂地使用各种优雅的特效。
32

26.3 Cordova 中的原生应用程序
33
Cordova是一个免费、开源的框架，它允许我们使用标准的Web API而不是原生代码来创建移
动应用。它还允许我们使用HTML、JavaScript、CSS和AngularJS编写移动应用程序，而不是编写 34
Objective-C或者Java（分别代表iOS和Android平台），如图26-2所示。
Cordova通过JavaScript暴露了很多可访问原生设备的API，这就允许我们运行设备特定的操 35
作，比如获取本地位置或者使用相机功能。Cordova本身就被设计为基于插件的架构，因此你可
以使用Cordova社区提供的插件，比如本地音频访问或者条形码扫描插件。
36