AngularJS 入門(mén)教程之事件處理器詳解
在這一步，你會(huì)在手機(jī)詳細(xì)信息頁(yè)面讓手機(jī)圖片可以點(diǎn)擊。
請(qǐng)重置工作目錄：
git checkout -f step-10
手機(jī)詳細(xì)信息視圖展示了一幅當(dāng)前手機(jī)的大號(hào)圖片，以及幾個(gè)小一點(diǎn)的縮略圖。如果用戶(hù)點(diǎn)擊縮略圖就能把那張大的替換成自己那就更好了?，F(xiàn)在我們來(lái)看看如何用AngularJS來(lái)實(shí)現(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è)為第一個(gè)手機(jī)圖片的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屬性上。
同時(shí)我們注冊(cè)一個(gè)ngClick處理器到縮略圖上。當(dāng)一個(gè)用戶(hù)點(diǎn)擊縮略圖的任意一個(gè)時(shí)，這個(gè)處理器會(huì)使用setImage事件處理函數(shù)來(lái)把mainImageUrl屬性設(shè)置成選定縮略圖的URL。
測(cè)試
為了驗(yàn)證這個(gè)新特性，我們添加了兩個(gè)端到端測(cè)試。一個(gè)驗(yàn)證主圖片被默認(rèn)設(shè)置成第一個(gè)手機(jī)圖片。第二個(gè)測(cè)試點(diǎn)擊幾個(gè)縮略圖并且驗(yàn)證主圖片隨之合理的變化。
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)在可以刷新你的瀏覽器，然后重新跑一遍端到端測(cè)試，或者你可以在AngularJS的服務(wù)器上運(yùn)行一下。
練習(xí)
為PhoneDetailCtrl添加一個(gè)新的控制器方法：
$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)備，我們會(huì)學(xué)習(xí)用一種更加優(yōu)雅的方式來(lái)獲取數(shù)據(jù)。
以上就是AngularJS 事件處理器的資料整理，后續(xù)繼續(xù)補(bǔ)充，謝謝大家對(duì)本站的支持！
- AngularJS實(shí)現(xiàn)給動(dòng)態(tài)生成的元素綁定事件的方法
- AngularJS中directive指令使用之事件綁定與指令交互用法示例
- AngularJS深入探討scope，繼承結(jié)構(gòu)，事件系統(tǒng)和生命周期
- AngularJS 中的事件詳解
- 淺談angularJS中的事件
- Angularjs中的事件廣播 —全面解析$broadcast,$emit,$on
- AngularJS實(shí)現(xiàn)表單驗(yàn)證
- 詳細(xì)分析使用AngularJS編程中提交表單的方式
- AngularJS使用ngMessages進(jìn)行表單驗(yàn)證
- Angular的事件和表單詳解
相關(guān)文章
Angular.js跨controller實(shí)現(xiàn)參數(shù)傳遞的兩種方法
這篇文章主要給大家介紹了關(guān)于Angular.js跨controller實(shí)現(xiàn)參數(shù)傳遞的兩種方法，文中給出了詳細(xì)的介紹和示例代碼，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-02-02
Angular angular-file-upload文件上傳的示例代碼
這篇文章主要介紹了Angular angular-file-upload文件上傳的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Angular.js實(shí)現(xiàn)掃碼槍掃碼并生成二維碼
這篇文章主要為大家介紹了Angular.js實(shí)現(xiàn)掃碼槍掃碼并生成二維碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
本文主要講解AngularJS模塊的相關(guān)知識(shí)，這里整理了詳細(xì)的基礎(chǔ)資料，并提供示例代碼和示例實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下2016-08-08
Angular2使用vscode斷點(diǎn)調(diào)試ts文件的方法
本篇文章主要介紹了Angular2使用vscode斷點(diǎn)調(diào)試ts文件的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
Angular2.0/4.0 使用Echarts圖表的示例代碼
本篇文章主要介紹了Angular2.0/4.0 使用Echarts的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
本文主要介紹AngularJS 引導(dǎo)程序,這里整理了相關(guān)資料及示例代碼，詳細(xì)講解了引導(dǎo)程序的知識(shí)要點(diǎn)，有興趣的小伙伴可以參考下2016-08-08
Angular的Bootstrap(引導(dǎo))和Compiler(編譯)機(jī)制
這篇文章主要介紹了Angular的Bootstrap(引導(dǎo))和Compiler(編譯)機(jī)制的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了Angular PWA使用的Demo示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
這篇文章主要介紹了AngularJS的通信機(jī)制,AngularJS是非常具有人氣的JavaScript庫(kù),需要的朋友可以參考下2015-06-06