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

AngularJS 1.3 Grundkurs

HTML-Inhalte binden

Testen Sie unsere 2019 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Bindung von HTML-Inhalten innerhalb des Scope erfolgt über die Integration einer Direktive aus einem speziellen AngularJS-Modul.
03:20

Transkript

Sicherlich wird es bei euch mal vokommen, dass ihr bei einer Bindung mal HTML-Coden mitbinden wollt oder darstellen wollt und entsprechend dann auch kombinieren lassen wollt von AngularJS. Das funktioniert mit den klassischen Ausdrücken, die wir bisher kennen gelernt haben nicht. Würde ich also zum Beispiel jetzt hier hingehen und hier zum Beispiel einen Zahlenumbruch hinzufügen und dann einen weiteren Ausdruck hier hinzufügen. Dann werden wir hier sehen, dass der HTML-Code hier komplett ignoriert wird und einfach nur so dargestellt wird, also etwas witzlos. Das, was ich aber machen kann, ist, dass ich das Sanitize Modul von Angular miteinbinde. Das Miteinbinden bedeutet, dass ich in meiner Bibliothek die Javascript-Datei dazu entsprechend hier hineinkopiere. Sanitize wird bereit gestellt in einem Angular-Model, namens ngSanitize, das heißt, ich muss jetzt auch daran denken, dass ich in meiner Applikation selber diese Abhängigkeit hier mitdefiniere. So. Wunderbar! Und ab jetzt bin ich dann in der Lage, nicht nur ng-bind zu verwenden, sondern auch ng-bind-html. Und da sehen wir dan wunderbar, ng-bind-html funktioniert ebenfalls mit einer One-Time-Binding, das heißt in einer einmaligen Bindung in einer permanenten Bindung. Und zu guter Letzt möchte ich jetzt hier nochmal den Zeilenumbruch nach dem TimeOut ebenfalls hier mitnehmen. Großartig! Teste das Genze jetzt! Und dann sehen wir, dass das nicht funktioniert hat. Gib mir dann eine ganz kurze Sekunde, dass ich mal reinschauen würde,was liegen kann. Ich habe, so clever, wie ich bin, die Bibliothek zwar kopiert, ich habe die Bibliothek auch in meiner App miteingebunden, aber ich habe natürlich vergessen, die Bibliothek zu laden. Das wird euch hundert tausend mal vorkommen. Denkt bitte daran nicht! Die Flinte ins Korn werfen. Aber das sind so die klassischen Fehler, die ihr machen werdet. Also entweder habt ihr das Modul vergessen in dem Applikationsmodel mitzuregistrieren oder ihr habt das Modul vergessen zu laden. Das sind die typischen Klassiker. Habe ich jetzt hier natürlich bewusst reingemacht, damit ich dann sehen könnte, wie schnell das passieren kann. Na ja, Spaß beiseite! Jetzt schau mir das Ganze noch mal an. Ich mache jetzt mal schnell die Konsole weg. Und ihr erkennt nun, dass hier das Peter Müller mit einem Zeilenumbruch hier wunderbar funktioniert hat, das heißt, die jeweilige ng-bind Methode mit HTML sorgt dafür, dass die Eigenschaft nicht nur einfach als Zeichenkette hier übernommen wird, sondern tatsächlich der HTML-Code da drin entsprechend auch interpretiert wird. Das wird auch bedeuten, dass wenn ihr zum Beispiel weitere Angular Direktiven dorthin hättet, dass diese dann mitkombiniert werden würden, dass dann entsprechend auch Funktionalität dann in Gang gesetzt werden würde von der Direktiven, aber damit ihr das alles machen könnt, müsst ihr, wie gesagt, ng-bind-html Element verwenden. Und damit das mit dem ng-bind-html ordentlich funktioniert, muss das Sanitize Modul geladen werden. Und in der Applikation selber muss das Sanitize hier als ngSanitize dann auch mit hier initialisiert werden. In diesem Video haben wir also gelernt, wie wir in der Lage sind, HTML-Elemente zu binden.

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!