事件處理器 - Event Handlers

在這一步，你會在手機詳細信息頁面讓手機圖片可以點擊。

請重置工作目錄：

    git checkout -f step-10

手機詳細信息視圖展示了一幅當前手機的大號圖片，以及幾個小一點的縮略圖。如果用戶點擊縮略圖就能把那張大的替換成自己那就更好了。現(xiàn)在我們來看看如何用AngularJS來實現(xiàn)它。

步驟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控制器中，我們創(chuàng)建了mainImageUrl模型屬性，并且把它的默認值設(shè)為第一個手機圖片的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][ng.directive:ngClick]處理器到縮略圖上。當一個用戶點擊縮略圖的任意一個時，這個處理器會使用setImage事件處理函數(shù)來把mainImageUrl屬性設(shè)置成選定縮略圖的URL。

測試

為了驗證這個新特性，我們添加了兩個端到端測試。一個驗證主圖片被默認設(shè)置成第一個手機圖片。第二個測試點擊幾個縮略圖并且驗證主圖片隨之合理的變化。

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');
        });
      });
    });

你現(xiàn)在可以刷新你的瀏覽器，然后重新跑一遍端到端測試。

練習(xí)

為PhoneDetailCtrl添加一個新的控制器方法：

    $scope.hello = function(name) {
      alert('Hello ' + (name || 'world') + '!');
    }

并且添加：

    <button ng-click="hello('Elmo')">Hello</button>

到phone-details.html模板。

總結(jié)

現(xiàn)在圖片瀏覽器已經(jīng)做好了，我們已經(jīng)為 REST 和定制服務(wù)（最后一步啦?。┳龊昧藴蕚?，我們會學(xué)習(xí)用一種更加優(yōu)雅的方式來獲取數(shù)據(jù)。