في هذه الخطوة ، ستجعل صورة الهاتف المحمول قابلة للنقر على صفحة تفاصيل الهاتف المحمول.
يرجى إعادة تعيين دليل العمل:
git checkout -f step -10
يعرض عرض تفاصيل الهاتف المحمول صورة كبيرة للهاتف الحالي ، بالإضافة إلى عدد قليل من الصور المصغرة الأصغر. سيكون من الأفضل أن ينقر المستخدم على الصورة المصغرة ويمكنه استبدال الشخص الكبير بنفسه. الآن دعونا نرى كيفية تنفيذها مع AngularJS.
يتم سرد الاختلافات الأكثر أهمية بين الخطوة 9 والخطوة 10 أدناه. يمكنك رؤية الفرق الكامل في Github.
وحدة تحكم
APP/JS/Controllers.JS
... وظيفة phonedetailctrl (نطاق $ ، $ conteparams ، $ http) {$ http.get ('phones/' + $ routeparams.phone + '.json'). $ scope.setImage = function (imageurl) {$ scope.mainimageurl = imageUrl ؛ }} // phonedetailctrl. $ enject = ['$ scope' ، '$ routeparams' ، '$ http'] ؛في وحدة تحكم phonedetailctrl ، نقوم بإنشاء خاصية نموذج MainImageurl ونضع قيمتها الافتراضية على عنوان URL في أول صورة للجوال.
نموذج
التطبيق/الجزئي/detail.html
<img ng-src = "{{mainimageurl}}"> ... <ul> <li ng-repeat = "img in phone.images"> <img ng-src = "{{img}}" ng click = "setImage (img)"> </li> </ul> ...نربط توجيه NGSRC للصورة الكبيرة إلى خاصية MainimageUrl.
في الوقت نفسه ، نقوم بتسجيل معالج NgClick على الصورة المصغرة. عندما ينقر المستخدم على أي من الصور المصغرة ، سيستخدم المعالج وظيفة معالجة حدث SetImage لتعيين خاصية MainImageurl على عنوان URL الخاص بالثنائي المصغرة المحددة.
امتحان
للتحقق من هذه الميزة الجديدة ، أضفنا اختبارين من طرف إلى طرف. يتم تعيين الصورة الرئيسية للتحقق إلى أول صورة للجوال بشكل افتراضي. ينقر الاختبار الثاني على العديد من الصور المصغرة والتحرير التي تتغيرها الصورة الرئيسية بشكل معقول.
اختبار/e2e/السيناريوهات
... وصف ("عرض تفاصيل الهاتف" ، Function () {... it ("يجب عرض صورة الهاتف الأولى كصورة الهاتف الرئيسية" ، الدالة () {توقع (element ('img.phone'). attr ('src'). العنصر (. توقع ('img.phone'). attr ('src'). }) ؛ }) ؛يمكنك الآن تحديث متصفحك وتشغيل الاختبار الشامل مرة أخرى ، أو يمكنك تشغيله على خادم AngularJS.
يمارس
إضافة طريقة تحكم جديدة إلى phonedetailctrl:
$ scope.hello = function (name) {Alert ('hello' + (name || 'World') + '!') ؛ }وأضف:
<button ng click = "hello ('elmo')"> hello </utton>
انتقل إلى قالب الهاتف. html.
لخص
الآن بعد أن أصبح متصفح الصور جاهزًا ، نحن على استعداد للخطوة 11 (الخطوة الأخيرة!) ، سنتعلم الحصول على بيانات بطريقة أكثر أناقة.
ما سبق هو المعلومات المرتبة من معالج حدث AngularJS. سوف نستمر في إضافته لاحقًا. شكرا لك على دعمك لهذا الموقع!