In diesem Schritt klicken Sie auf der Seite "Handy -Details) das Bild des Mobiltelefons.
Bitte setzen Sie das Arbeitsverzeichnis zurück:
Git Checkout -f Schritt -10
Die Ansicht der Mobiltelefondetails zeigt ein großes Bild des aktuellen Telefons sowie einige kleinere Miniaturansichten. Es wäre sogar noch besser, wenn der Benutzer auf das Miniaturbild klickt und den großen durch sich selbst ersetzen kann. Lassen Sie uns nun sehen, wie man es mit AngularJs implementiert.
Die wichtigsten Unterschiede zwischen Schritt 9 und Schritt 10 sind unten aufgeführt. Sie können den vollständigen Unterschied im GitHub sehen.
Regler
App/JS/Controller.js
... Funktion PhonedetailCtrl ($ scope, $ routeParams, $ http) {$ http.get ('Telefones/' + $ routeParams.phoneId + '.json'). Erfolg (Funktion (function (data) {$ scope.phone = data; $ scope.setImage = function (imageurl) {$ scope.mainimageurl = imageUrl; }} // PhonedetailCtrl.Im PhonedetailCtrl -Controller erstellen wir die MainImageurl -Modelleigenschaft und setzen ihren Standardwert auf die URL des ersten mobilen Bildes.
Vorlage
app/partials/Telefondetail.html
<img ng-src = "{{mainimageurl}}"> ... <ul> <li ng-repeat = "img in TelefonWir binden die NGSRC -Richtlinie des großen Bildes an die Mainimageurl -Eigenschaft.
Gleichzeitig registrieren wir einen NGCLICK -Prozessor in die Miniaturansicht. Wenn ein Benutzer auf eine der Miniaturansichten klickt, verwendet der Prozessor die SetImage -Ereignishandhabungsfunktion, um die MainImageurl -Eigenschaft auf die URL des ausgewählten Miniaturansatzes einzustellen.
prüfen
Um diese neue Funktion zu überprüfen, haben wir zwei End-to-End-Tests hinzugefügt. Ein Überprüfungs -Hauptbild wird standardmäßig auf das erste mobile Bild eingestellt. Der zweite Test klickt auf mehrere Miniaturansichten und Verifys, die das Hauptbild vernünftig ändert.
test/e2e/szenarien.js
... beschreiben ('Telefondetailansicht', function () {... es ('sollte das erste Telefonbild als Haupt-Telefonbild anzeigen', function () {erwarten (element ('img.phone'). attr ('src')). tobe ('img/telefones/nexus-s.0.jpg');}); Element ('. Telefon-Thumbs li: n-Kind (3) img'). Click (); erwarten ('img.phone'). attr ('src')). }); });Sie können jetzt Ihren Browser aktualisieren und den End-to-End-Test erneut ausführen oder auf dem AngularJS-Server ausführen.
üben
Fügen Sie PhonedetailCtrl eine neue Controller -Methode hinzu:
$ scope.hello = function (name) {alert ('hello' + (name || 'world') + '!'); }Und fügen Sie hinzu:
<button ng-klick = "Hallo ('elmo')"> Hallo </button>
Gehen Sie zur Vorlage zur Telefondetails.html.
Zusammenfassen
Nachdem der Bildbrowser fertig ist, sind wir bereit für Schritt 11 (der letzte Schritt!), Lernen wir, Daten auf elegantere Weise zu erhalten.
Die oben genannten sind die Informationen, die aus dem AngularJS -Ereignisprozessor sortiert sind. Wir werden es später weiter hinzufügen. Vielen Dank für Ihre Unterstützung für diese Seite!