Pada langkah ini, Anda akan membuat gambar ponsel dapat diklik pada halaman Detail Ponsel.
Harap atur ulang direktori kerja:
Git Checkout -F Langkah -10
Tampilan detail ponsel menunjukkan gambaran besar dari ponsel saat ini, serta beberapa thumbnail yang lebih kecil. Akan lebih baik jika pengguna mengklik thumbnail dan dapat menggantikan yang besar dengan dirinya sendiri. Sekarang mari kita lihat bagaimana mengimplementasikannya dengan AngularJS.
Perbedaan terpenting antara Langkah 9 dan Langkah 10 tercantum di bawah ini. Anda dapat melihat perbedaan lengkap dalam GitHub.
Pengontrol
APP/JS/CONTROLER.JS
... function phonedetailctrl ($ scope, $ routeParams, $ http) {$ http.get ('phones/' + $ routeParams.phoneid + '.json'). Success (function (data) {$ scope.phone = data; $ scope.mainimageurl = data. $ scope.setImage = function (ImageUrl) {$ scope.mainimageUrl = ImageUrl; }} // phonedetailctrl. $ Inject = ['$ scope', '$ routeParams', '$ http'];Dalam pengontrol phoneDetailCtrl, kami membuat properti model MainiMageUrl dan menetapkan nilai defaultnya ke URL gambar seluler pertama.
templat
Aplikasi/Partials/Telepon-Detail.html
<img ng-src = "{{mainimageUrl}}"> ... <ul> <li ng-repeat = "img in phone.images"> <img ng-src = "{{img}}" ng-click = "setimage (img)"> </li> </ul> ...Kami mengikat arahan NGSRC dari gambar besar ke properti MainimageUrl.
Pada saat yang sama, kami mendaftarkan prosesor NgClick ke thumbnail. Ketika pengguna mengklik salah satu thumbnail, prosesor akan menggunakan fungsi penanganan acara setImage untuk mengatur properti MainiMageUrl ke URL dari thumbnail yang dipilih.
tes
Untuk memverifikasi fitur baru ini, kami menambahkan dua tes ujung ke ujung. Gambar utama verifikasi diatur ke gambar seluler pertama secara default. Tes kedua mengklik beberapa thumbnail dan memverifikasi bahwa gambar utama berubah secara wajar.
tes/e2e/skenario.js
... jelaskan ('Tampilan Detail Telepon', Function () {... it ('harus menampilkan gambar telepon pertama sebagai gambar telepon utama', fungsi () {harapkan (element ('img.phone'). attr ('src')). Tobe ('img/phones/nexus-s.0.jpg');}); itse ('harus menukar gambar utama jika a klik'); Element ('. Telepon-Bumbs Li: Nth-Child (3) IMG'). Klik (); Happen (element ('img.phone'). Attr ('Src')). hargai (element ('img.phone'). attr ('src')). Tobe ('img/phones/nexus-s.0.jpg'); }); });Anda sekarang dapat menyegarkan browser Anda dan menjalankan tes ujung ke ujung lagi, atau Anda dapat menjalankannya di server AngularJS.
praktik
Tambahkan metode pengontrol baru ke phonedetailctrl:
$ scope.hello = function (name) {alert ('hello' + (name || 'world') + '!'); }Dan tambahkan:
<tombol ng-click = "halo ('elmo')"> halo </button>
Pergi ke Template Telepon-Details.html.
Meringkaskan
Sekarang peramban gambar sudah siap, kami siap untuk langkah 11 (langkah terakhir!), Kita akan belajar mendapatkan data dengan cara yang lebih elegan.
Di atas adalah informasi yang diurutkan dari prosesor acara AngularJS. Kami akan terus menambahkannya nanti. Terima kasih atas dukungan Anda untuk situs ini!