AngularJS 入門教程之事件處理器詳解_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}}" 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處理器到縮圖上。當一個使用者點擊縮圖的任意一個時，這個處理器會使用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模板。

總結

現在圖片瀏覽器已經做好了，我們已經為步驟11（最後一步啦！）做好了準備，我們會學慣用一種更加優雅的方式來擷取資料。

以上就是AngularJS 事件處理器的資料整理，後續繼續補充，謝謝大家對本站的支援！