请重置工作目录：

手机详细信息视图展示了一幅当前手机的大号图片，以及几个小一点的缩略图。如果用户点击缩略图就能把那张大的替换成自己那就更好了。现在我们来看看如何用AngularJS来实现它。

步骤9和步骤10之间最重要的不同在下面列出。你可以在里看到完整的差别。

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.mainImageUrl = imageUrl;
  }
}
//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', '$http'];

app/partials/phone-detail.html

我们把大图片的ngSrc指令绑定到mainImageUrl属性上。

同时我们注册一个ngClick处理器到缩略图上。当一个用户点击缩略图的任意一个时，这个处理器会使用setImage事件处理函数来把mainImageUrl属性设置成选定缩略图的URL。

为了验证这个新特性，我们添加了两个端到端测试。一个验证主图片被默认设置成第一个手机图片。第二个测试点击几个缩略图并且验证主图片随之合理的变化。

...
  describe('Phone detail view', function() {
...
    it('should display the first phone image as the main phone image', function() {
    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');
    });
  });
});

你现在可以刷新你的浏览器，然后重新跑一遍端到端测试，或者你可以在上运行一下。

为PhoneDetailCtrl添加一个新的控制器方法：

并且添加：

到phone-details.html模板。

总结