In AngularJS ist es möglich, HTML-Fragmente im Controller zu erstellen und diese in der Ansicht rendern zu lassen. Dies kann für die dynamische Generierung von Listen oder anderen komplexen UI-Elementen nützlich sein.
Um dies zu erreichen, erstellen Sie zunächst eine Modelleigenschaft, die das HTML-Fragment enthält. Im folgenden Beispiel erstellen wir eine „customHtml“-Eigenschaft:
1 2 3 |
|
Als nächstes verwenden Sie die ng-bind-html-Direktive in der Ansicht, um die customHtml-Eigenschaft an ein Element zu binden:
1 |
|
AngularJS stellt den HTML-Code jedoch als Zeichenfolge in Anführungszeichen dar, da es ihn aus Gründen der Bereinigung als unsicher behandelt. Um dieses Problem zu beheben, können Sie entweder den $sce-Dienst verwenden oder das ngSanitize-Modul einbinden.
Verwenden von $sce
Injizieren Sie zunächst den $sce-Dienst in den Controller:
1 2 3 |
|
Verwenden Sie dann die Methode $sce.trustAsHtml(), um die HTML-Zeichenfolge in eine sichere Datei umzuwandeln Format:
1 |
|
NgSanitize verwenden
Um ngSanitize zu verwenden, fügen Sie zunächst das Skript „angular-sanitize.min.js“ ein:
1 |
|
Fügen Sie dann ngSanitize als Abhängigkeit in Ihr AngularJS ein Modul:
1 |
|
Mit ngSanitize können Sie den HTML-String direkt der Modelleigenschaft zuweisen:
1 |
|
Mit beiden Methoden können Sie HTML-Fragmente dynamisch in der Ansicht generieren und rendern. Bietet mehr Flexibilität in Ihren AngularJS-Anwendungen.
Das obige ist der detaillierte Inhalt vonWie rendere ich HTML-Fragmente sicher in AngularJS-Ansichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!