Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

AngularJS 1.3 Grundkurs

Aktionen nach Mausklick ausführen

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
AngularJS beinhaltet verschiedene Direktiven, um entsprechende Aktionen nach einem einzelnen oder doppelten Mausklick auszuführen.
02:53

Transkript

In diesem Video möchte ich euch die Direktiven für Mausereignisse ng-click und ng-double-click einmal vorführen. Im Grunde genommen relativ einfach. Ich kann ein Klickereignis, zum Beispiel auf einen button, mit ng-click binden, und kann ein Hendler einfach hier definieren, der dann auch im Scope existieren muss, das heißt, ich schnappe mir das Ganze hier und sage: "Hey, Scope, du hast hier jetzt Klickfunktion, weil ich sehr entsprechend hier mit ng-click aufrufen möchte" und deligiere das Ganze dann jetzt hier einmal. Und hier schreibe ich einfach "click me". Testen wir das Ganze dann jetzt hier, werde ich hier ein Console... Ah, lass uns mal statt console.log einfach mal etwas Schickes machen. Schnappe mir jetzt das $-Element und werde dann entsprechend hier mit element.css die color auf red setzen. Perfekt! Testen wir das Ganze jetzt hier. Klick ich da drauf. Und schwupp ist dann entsprechend die Farbe auf Rot umgesetzt. Im Übrigen bin ich auch in der Lage, das Ereignis, das mit diesem Klick einhergeht, zu übermitteln. Dafür kann ich $event einfach hier als Patameter definieren. Und hier kann ich dann das event entgegennehmen, dass ich an dieser Stelle mehr mal per console.log ausgeben lassen möchte. Testen wir das Ganze! Lassen uns das mal hier ausgeben. Dann sehen wir, dass das Maus-event war, indem ich JavaScript typisch auch so was, wie altKeys oder entsprechend dann halt die Taste, die noch zusätzlich gedrückt wurde, X und Y Koordinante erfragen und weiter bearbeiten könnte. Double Click (dblClick) ist im Grunde genommen wirklich das gleich paar Schuh. Ich kann jetzt hier einfach hier dblClick mit dem hier click definieren. und muss dann hier entsprechend auch dblClick als Ereignishendler hier machen, dupliziere das, weil ich ein wenig faul bin hier schnell, und werde dann mal blue als color definieren. Und hier mache ich dann dblclick me Hätte ich übrigens auch kombinieren können in einem button. Das ist es überhaupt kein Problem. So. Testen wir das Ganze jetzt hier. Und habe ich hier normalen Klick, mache ich normalen Klick hier. Passiert gar nichts. Jetzt mal ein Double-Click. Sieht ihr, dass das Ganze blau wird und in der Console habe ich dann hier die Double-Click-Information entsprechend dann halt noch. In diesem Video haben wir also gemeinsam die Click- und Double-Click- Maus-Ereignisse und die Angular-Direktiven ng-click und ng-double-click kennen gelernt.

AngularJS 1.3 Grundkurs

Legen Sie mit AngularJS moderne, anspruchsvolle Webprojekte auf der Basis von HTML, CSS und JavaScript an.

4 Std. 15 min (74 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Hersteller:
Software:
AngularJS AngularJS 1.3
Exklusiv für Abo-Kunden
Erscheinungsdatum:19.11.2014

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!