AngularJS Einführendes Tutorial: Detaillierte Erläuterung des Ereignisprozessors

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 Telefon

Wir 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!