En este paso, hará que la imagen del teléfono móvil se pueda hacer clic en la página Detalles del teléfono móvil.
Restablezca el directorio de trabajo:
Git Checkout -F Paso -10
La vista de detalles del teléfono móvil muestra una imagen grande del teléfono actual, así como algunas miniaturas más pequeñas. Sería aún mejor si el usuario haga clic en la miniatura y pueda reemplazar la grande consigo mismo. Ahora veamos cómo implementarlo con AngularJS.
Las diferencias más importantes entre el paso 9 y el paso 10 se enumeran a continuación. Puedes ver la diferencia completa en GitHub.
Controlador
app/js/controladores.js
... function phonedetailctrl ($ scope, $ rutuparams, $ http) {$ http.get ('phones/' + $ ruteParams.phoneid + '.json'). éxito (data) {$ scope.phone = data; $ scope.mainiMageurl = data.images [0];}); $ scope.setImage = function (imageUrl) {$ scope.mainiMageUrl = imageUrl; }} // phonedetailctrl. $ Inject = ['$ scope', '$ rututEparams', '$ http'];En el controlador PhonedetaAlctrl, creamos la propiedad del modelo MainImageUrl y establecemos su valor predeterminado en la URL de la primera imagen móvil.
plantilla
aplicación/parcials/teléfono-detail.html
<img ng-src = "{{mainImageUrl}}"> ... <ul> <li ng-depeat = "img en phone.images"> <img ng-src = "{{img}}" ng-c-ciclk = "setImage (img)"> </li> </ul> ... ...Vinculamos la directiva NGSRC de la imagen grande a la propiedad MainImageUrl.
Al mismo tiempo, registramos un procesador NgClick en la miniatura. Cuando un usuario hace clic en cualquiera de las miniaturas, el procesador utilizará la función de manejo de eventos SetImage para establecer la propiedad MainImageUrl en la URL de la miniatura seleccionada.
prueba
Para verificar esta nueva característica, agregamos dos pruebas de extremo a extremo. Una imagen principal de verificación se establece en la primera imagen móvil de forma predeterminada. La segunda prueba hace clic en varias miniaturas y verifys que la imagen principal cambia razonablemente.
prueba/e2e/escenarios.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() { Elemento ('. Phone-Thumbs Li: Nth-Child (3) img'). Click (); Espere (elemento ('img.phone'). attr ('src')). }); });Ahora puede actualizar su navegador y ejecutar la prueba de extremo a extremo nuevamente, o puede ejecutarla en el servidor AngularJS.
práctica
Agregue un nuevo método de controlador a PhonedetailCtrl:
$ scope.hello = function (name) {alert ('hello' + (name || 'world') + '!'); }Y agregar:
<botón ng-click = "hello ('elmo')"> Hello </boton>
Vaya a la plantilla del teléfono-details.html.
Resumir
Ahora que el navegador de imágenes está listo, estamos listos para el paso 11 (¡el último paso!), Aprenderemos a obtener datos de una manera más elegante.
Lo anterior es la información ordenada del procesador de eventos AngularJS. Continuaremos agregándolo más tarde. ¡Gracias por su apoyo para este sitio!