在這一步，你會在手機詳細信息頁面讓手機圖片可以點擊。
請重置工作目錄：
~~~
git checkout -f step-10
~~~
手機詳細信息視圖展示了一幅當前手機的大號圖片，以及幾個小一點的縮略圖。如果用戶點擊縮略圖就能把那張大的替換成自己那就更好了。現在我們來看看如何用AngularJS來實現它。
步驟9和步驟10之間最重要的不同在下面列出。你可以在[GitHub](https://github.com/angular/angular-phonecat/compare/step-9...step-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.setImage = function(imageUrl) {
$scope.mainImageUrl = imageUrl;
}
}
//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', '$http'];
~~~
在`PhoneDetailCtrl`控制器中，我們創建了`mainImageUrl`模型屬性，并且把它的默認值設為第一個手機圖片的URL。
## 模板
app/partials/phone-detail.html
~~~
<img ng-src="{{mainImageUrl}}" class="phone">
...
<ul class="phone-thumbs">
<li ng-repeat="img in phone.images">
<img ng-src="{{img}}" ng-click="setImage(img)">
</li>
</ul>
...
~~~
我們把大圖片的`ngSrc`指令綁定到`mainImageUrl`屬性上。
同時我們注冊一個[ngClick](http://code.angularjs.org/1.1.0/docs/api/ng.directive: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的服務器](http://angular.github.com/angular-phonecat/step-4/test/e2e/runner.html)上運行一下。
## 練習
為`PhoneDetailCtrl`添加一個新的控制器方法：
~~~
$scope.hello = function(name) {
alert('Hello ' + (name || 'world') + '!');
}
~~~
并且添加：
~~~
<button ng-click="hello('Elmo')">Hello</button>
~~~
到phone-details.html模板。
## 總結
現在圖片瀏覽器已經做好了，我們已經為[步驟11](a00e)（最后一步啦！）做好了準備，我們會學習用一種更加優雅的方式來獲取數據。
