AngularJS 入門教程之事件處理器詳解
在這一步，你會在手機詳細(xì)信息頁面讓手機圖片可以點擊。
請重置工作目錄：
git checkout -f step-10
手機詳細(xì)信息視圖展示了一幅當(dāng)前手機的大號圖片，以及幾個小一點的縮略圖。如果用戶點擊縮略圖就能把那張大的替換成自己那就更好了?，F(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模型屬性，并且把它的默認(rèn)值設(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處理器到縮略圖上。當(dāng)一個用戶點擊縮略圖的任意一個時，這個處理器會使用setImage事件處理函數(shù)來把mainImageUrl屬性設(shè)置成選定縮略圖的URL。
測試
為了驗證這個新特性，我們添加了兩個端到端測試。一個驗證主圖片被默認(rèn)設(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)在可以刷新你的瀏覽器，然后重新跑一遍端到端測試，或者你可以在AngularJS的服務(wù)器上運行一下。
練習(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)為步驟11（最后一步啦?。┳龊昧藴?zhǔn)備，我們會學(xué)習(xí)用一種更加優(yōu)雅的方式來獲取數(shù)據(jù)。
以上就是AngularJS 事件處理器的資料整理，后續(xù)繼續(xù)補充，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要介紹了AngularJS的視圖功能應(yīng)用,包括ng-view和ng-template以及$routeProvider的使用，以及 $routeProvider 需要的朋友可以參考下2015-06-06
解決angularJS中input標(biāo)簽的ng-change事件無效問題
今天小編就為大家分享一篇解決angularJS中input標(biāo)簽的ng-change事件無效問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
spy?是一種檢查函數(shù)是否被調(diào)用或提供自定義返回值的方法,我們可以使用spy?來測試依賴于服務(wù)的組件,并避免實際調(diào)用服務(wù)的方法來獲取值,在本文中,您將學(xué)習(xí)如何在?Angular?項目中使用?Jasmine?spy,需要的朋友可以參考下2024-03-03
本文主要對Angular的 $q, defer, promise進行實例分析介紹。具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
本篇文章主要介紹了angular仿支付寶密碼框輸入效果，詳細(xì)的介紹了使用ng寫一個密碼框格子支付模塊，具有一定的參考價值，有興趣的可以了解一下。2017-03-03
AngularJS中取消對HTML片段轉(zhuǎn)義的方法例子
這篇文章主要介紹了AngularJS中取消對HTML片段轉(zhuǎn)義的方法例子,在一些需要顯示HTML的地方,就要取消AngularJS的轉(zhuǎn)義,本文就介紹了這種方法,需要的朋友可以參考下2015-01-01
本文主要介紹了AngularJS ng-if 指令,在這里整理了一些ng-if 指令的基礎(chǔ)資料,并有實例代碼,有需要的同學(xué)可以參考下2016-08-08
angularJS與bootstrap結(jié)合實現(xiàn)動態(tài)加載彈出提示內(nèi)容
這篇文章主要介紹了angularJS與bootstrap結(jié)合實現(xiàn)動態(tài)加載彈出提示內(nèi)容,通過bootstrp彈出提示。感興趣的朋友可以參考下本篇文章2015-10-10
本文主要介紹AngularJs concepts，這里整理了詳細(xì)資料及簡單示例代碼來講解相關(guān)知識，有學(xué)習(xí)這部分知識的朋友可以參考下2016-09-09
spring+angular實現(xiàn)導(dǎo)出excel的實現(xiàn)代碼
這篇文章主要介紹了spring+angular實現(xiàn)導(dǎo)出excel的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02