ในขั้นตอนนี้คุณจะทำให้ภาพโทรศัพท์มือถือคลิกได้ที่หน้ารายละเอียดโทรศัพท์มือถือ
โปรดรีเซ็ตไดเรกทอรีการทำงาน:
git checkout -f step -10
มุมมองรายละเอียดโทรศัพท์มือถือแสดงภาพขนาดใหญ่ของโทรศัพท์ปัจจุบันรวมถึงภาพขนาดเล็กขนาดเล็ก มันจะดียิ่งขึ้นถ้าผู้ใช้คลิกที่รูปขนาดย่อและสามารถแทนที่ตัวใหญ่ด้วยตัวเอง ตอนนี้เรามาดูวิธีการใช้งานกับ AngularJS
ความแตกต่างที่สำคัญที่สุดระหว่างขั้นตอนที่ 9 และขั้นตอนที่ 10 อยู่ด้านล่าง คุณสามารถเห็นความแตกต่างที่สมบูรณ์ใน GitHub
ผู้ควบคุม
แอพ/js/controllers.js
... ฟังก์ชั่น phoneedetailctrl ($ scope, $ routeparams, $ http) {$ http.get ('โทรศัพท์/' + $ routeparams.phoneid + '.json') ความสำเร็จ (ฟังก์ชั่น (ข้อมูล) {$ scope.phone = data; $ scope.mainimageurl = data.images [0];};}; $ scope.setImage = function (imageUrl) {$ scope.mainimageUrl = imageUrl; }} // phoneDetailctrl. $ inject = ['$ scope', '$ routeparams', '$ http'];ในคอนโทรลเลอร์ PhoneDetailctrl เราสร้างคุณสมบัติ MainImageUrl Model และตั้งค่าเริ่มต้นเป็น URL ของภาพมือถือแรก
เทมเพลต
แอพ/partials/phone-detail.html
<img ng-src = "{{mainimageUrl}}"> ... <ul> <li ng-repeat = "img ในโทรศัพท์. ภาพ"> <img ng-src = "{img}}" ng-click = "setImage (img)">เราผูกคำสั่ง NGSRC ของภาพขนาดใหญ่กับคุณสมบัติ MainImageUrl
ในเวลาเดียวกันเราลงทะเบียนโปรเซสเซอร์ ngclick ไปยังรูปขนาดย่อ เมื่อผู้ใช้คลิกที่รูปขนาดย่อใด ๆ โปรเซสเซอร์จะใช้ฟังก์ชั่นการจัดการเหตุการณ์ setImage เพื่อตั้งค่าคุณสมบัติ MainImageURL เป็น URL ของรูปขนาดย่อที่เลือก
ทดสอบ
ในการตรวจสอบคุณสมบัติใหม่นี้เราได้เพิ่มการทดสอบแบบ end-to-end สองครั้ง ภาพหลักการตรวจสอบถูกตั้งค่าเป็นภาพมือถือแรกโดยค่าเริ่มต้น การทดสอบครั้งที่สองคลิกบนรูปขนาดย่อหลายรูปแบบและตรวจสอบว่าภาพหลักเปลี่ยนไปอย่างสมเหตุสมผล
ทดสอบ/e2e/scenarios.js
... อธิบาย ('มุมมองรายละเอียดโทรศัพท์', function () {... มัน ('ควรแสดงภาพโทรศัพท์แรกเป็นภาพโทรศัพท์หลัก', function () {คาดหวัง (องค์ประกอบ ('img.phone'). attr ('src')). tobe ('img/โทรศัพท์/nexus-s.0.jpg');}; องค์ประกอบ (. โทรศัพท์-thumbs li: nth-child (3) img '). คลิก (); คาดหวัง ('img.phone'). attr ('src')). tobe ('img/phone/nexus-s.0.jpg'); - -ตอนนี้คุณสามารถรีเฟรชเบราว์เซอร์ของคุณและเรียกใช้การทดสอบแบบ end-to-end อีกครั้งหรือคุณสามารถเรียกใช้บนเซิร์ฟเวอร์ AngularJS
ฝึกฝน
เพิ่มวิธีคอนโทรลเลอร์ใหม่ในการโทรศัพท์
$ scope.hello = function (ชื่อ) {Alert ('Hello' + (ชื่อ || 'World') + '!'); -และเพิ่ม:
<ปุ่ม ng-click = "hello ('elmo')"> สวัสดี </button>
ไปที่แม่แบบ details.html
สรุป
ตอนนี้เบราว์เซอร์รูปภาพพร้อมแล้วเราพร้อมสำหรับขั้นตอนที่ 11 (ขั้นตอนสุดท้าย!) เราจะเรียนรู้ที่จะได้รับข้อมูลในแบบที่สง่างามยิ่งขึ้น
ข้างต้นคือข้อมูลที่เรียงลำดับจากโปรเซสเซอร์เหตุการณ์ AngularJS เราจะเพิ่มในภายหลัง ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!