Dans cette étape, vous rendra l'image du téléphone mobile cliquable sur la page Détails du téléphone mobile.
Veuillez réinitialiser le répertoire de travail:
Git Checkout -F Étape-10
La vue sur les détails du téléphone mobile montre une grande image du téléphone actuel, ainsi que quelques miniatures plus petites. Il serait encore mieux que l'utilisateur clique sur la vignette et peut remplacer le gros par lui-même. Voyons maintenant comment l'implémenter avec AngularJS.
Les différences les plus importantes entre l'étape 9 et l'étape 10 sont répertoriées ci-dessous. Vous pouvez voir la différence complète dans GitHub.
Contrôleur
app / js / contrôlers.js
... fonction phoneDeTailctrl ($ scope, $ routeParams, $ http) {$ http.get ('phones /' + $ routeParams.phoneid + '.json'). Success (function (data) {$ scope.phone = data; $ scope.mainimageurl = data.images [0];}); $ scope.setImage = fonction (imageUrl) {$ scope.mainimageUrl = imageurl; }} // phoneDeTailctrl. $ Inject = ['$ scope', '$ RouteParams', '$ http'];Dans le contrôleur PhoneDetailCtrl, nous créons la propriété du modèle MainImageUrl et définissons sa valeur par défaut sur l'URL de la première image mobile.
modèle
application / partiels / téléphone-detail.html
<img ng-src = "{{mainImageUrl}}"> ... <ul> <li ng-repeat = "img dans phone.images"> <img ng-src = "{{img}}" ng-Click = "setimage (img)"> </li> </ul> ... ...Nous lions la directive NGSRC de la grande image à la propriété MainImageUrl.
Dans le même temps, nous enregistrons un processeur NGClick à la vignette. Lorsqu'un utilisateur clique sur l'une des miniatures, le processeur utilisera la fonction de gestion des événements SETIMAGE pour définir la propriété MainImageUrl sur l'URL de la miniature sélectionnée.
test
Pour vérifier cette nouvelle fonctionnalité, nous avons ajouté deux tests de bout en bout. Une image principale de vérification est définie sur la première image mobile par défaut. Le deuxième test clique sur plusieurs miniatures et vérifies que l'image principale change raisonnablement.
test / e2e / scénarios.js
... décrire ('la vue de détail du téléphone', function () {... it ('devrait afficher la première image du téléphone en tant qu'image du téléphone principal', function () {attendre (élément ('img.phone'). att ('src')). Element ('. Phone-Thumbs Li: Nth-Child (3) IMG'). Click (); attendre (élément ('img.phone'). att ('src'). TOBE ('img / téléphones / nexus-s.0.jpg');}); }); });Vous pouvez maintenant actualiser votre navigateur et exécuter à nouveau le test de bout en bout, ou vous pouvez l'exécuter sur le serveur AngularJS.
pratique
Ajoutez une nouvelle méthode de contrôleur à PhoneDetailctrl:
$ scope.hello = fonction (name) {alert ('hello' + (name || 'world') + '!'); }Et ajouter:
<Button ng-Click = "Hello ('Elmo')"> Bonjour </ Button>
Accédez au modèle de téléphone-detet.html.
Résumer
Maintenant que le navigateur d'image est prêt, nous sommes prêts à l'étape 11 (la dernière étape!), Nous apprendrons à obtenir des données de manière plus élégante.
Ce qui précède est l'information triée du processeur d'événements AngularJS. Nous continuerons à l'ajouter plus tard. Merci pour votre soutien à ce site!