AngularJS 入门教程之事件处理器详解

在这一步，你会在手机详细信息页面让手机图片可以点击。请重置工作目录：git checkout -f step-10手机详细信息视图展示了一幅当前手机的大号图片，以及几个小一点的缩略图。如果用户点击缩略图就能把那张大的替换成自己那就更好了。现在我们来看看如何用AngularJS来实现它。
步骤9和步骤10之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。控制器app/js/controllers。js。function PhoneDetailCtrl($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<img ng-src=”{{mainImageUrl}}”>images”> <img ng-src=”{{img}}” ng-click=”setImage(img)”> </li></ul>我们把大图片的ngSrc指令绑定到mainImageUrl属性上。
同时我们注册一个ngClick处理器到缩略图上。当一个用户点击缩略图的任意一个时，这个处理器会使用setImage事件处理函数来把mainImageUrl属性设置成选定缩略图的URL。测试为了验证这个新特性，我们添加了两个端到端测试。一个验证主图片被默认设置成第一个手机图片。
第二个测试点击几个缩略图并且验证主图片随之合理的变化。test/e2e/scenarios。js。 describe(‘Phone detail view’, function() {。 it(‘should display the first phone image as the main phone image’, function() { expect(element(‘img。
phone’)。attr(‘src’))。toBe(‘img/phones/nexus-s。0。jpg’); }); it(‘should swap main image if a thumbnail image is clicked on’, function() { element(‘。
phone-thumbs li:nth-child(3) img’)。click(); expect(element(‘img。phone’)。attr(‘src’))。toBe(‘img/phones/nexus-s。2。jpg’); element(‘。
phone-thumbs li: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’) + ‘!’); }并且添加：<button ng-click=”hello(‘Elmo’)”>Hello</button>到phone-details。
html模板。