AngularJS 入门教程之事件处理器详解
在这一步，你会在手机详细信息页面让手机图片可以点击。
请重置工作目录：
gitcheckout-fstep-10
手机详细信息视图展示了一幅当前手机的大号图片，以及几个小一点的缩略图。如果用户点击缩略图就能把那张大的替换成自己那就更好了。现在我们来看看如何用AngularJS来实现它。
步骤9和步骤10之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。
控制器
app/js/controllers.js
...
functionPhoneDetailCtrl($scope,$routeParams,$http){
$http.get('phones/'+$routeParams.phoneId+'.json').success(function(data){
$scope.phone=data;
$scope.mainImageUrl=data.images[0];
});
$scope.setImage=function(imageUrl){
$scope.mainImageUrl=imageUrl;
}
}
//PhoneDetailCtrl.$inject=['$scope','$routeParams','$http'];
在PhoneDetailCtrl控制器中，我们创建了mainImageUrl模型属性，并且把它的默认值设为第一个手机图片的URL。
模板
app/partials/phone-detail.html
<imgng-src="{{mainImageUrl}}"class="phone">
...
<ulclass="phone-thumbs">
<ling-repeat="imginphone.images">
<imgng-src="{{img}}"ng-click="setImage(img)">
</li>
</ul>
...
我们把大图片的ngSrc指令绑定到mainImageUrl属性上。
同时我们注册一个ngClick处理器到缩略图上。当一个用户点击缩略图的任意一个时，这个处理器会使用setImage事件处理函数来把mainImageUrl属性设置成选定缩略图的URL。
测试
为了验证这个新特性，我们添加了两个端到端测试。一个验证主图片被默认设置成第一个手机图片。第二个测试点击几个缩略图并且验证主图片随之合理的变化。
test/e2e/scenarios.js
...
describe('Phonedetailview',function(){
...
it('shoulddisplaythefirstphoneimageasthemainphoneimage',function(){
expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.0.jpg');
});
it('shouldswapmainimageifathumbnailimageisclickedon',function(){
element('.phone-thumbsli:nth-child(3)img').click();
expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.2.jpg');
element('.phone-thumbsli:nth-child(1)img').click();
expect(element('img.phone').attr('src')).toBe('img/phones/nexus-s.0.jpg');
});
});
});
你现在可以刷新你的浏览器，然后重新跑一遍端到端测试，或者你可以在AngularJS的服务器上运行一下。
练习
为PhoneDetailCtrl添加一个新的控制器方法：
$scope.hello=function(name){
alert('Hello'+(name||'world')+'!');
}
并且添加：
<buttonng-click="hello('Elmo')">Hello</button>
到phone-details.html模板。
总结
现在图片浏览器已经做好了，我们已经为步骤11（最后一步啦！）做好了准备，我们会学习用一种更加优雅的方式来获取数据。
以上就是AngularJS事件处理器的资料整理，后续继续补充，谢谢大家对本站的支持！