Wie rendere ich HTML-Fragmente sicher in AngularJS-Ansichten?

HTML-Fragmente vom AngularJS-Controller in die Ansicht einfügen

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:

var SomeController = function () {
    this.customHtml = '<ul><li>render me please</li></ul>';
}

Als nächstes verwenden Sie die ng-bind-html-Direktive in der Ansicht, um die customHtml-Eigenschaft an ein Element zu binden:

<div ng-bind-html="customHtml"></div>

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:

app.controller('SomeController', function($sce) {
    // ...
});

Verwenden Sie dann die Methode $sce.trustAsHtml(), um die HTML-Zeichenfolge in eine sichere Datei umzuwandeln Format:

this.customHtml = $sce.trustAsHtml(someHtmlVar);

NgSanitize verwenden

Um ngSanitize zu verwenden, fügen Sie zunächst das Skript „angular-sanitize.min.js“ ein:

<script src="lib/angular/angular-sanitize.min.js"></script>

Fügen Sie dann ngSanitize als Abhängigkeit in Ihr AngularJS ein Modul:

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngSanitize'])

Mit ngSanitize können Sie den HTML-String direkt der Modelleigenschaft zuweisen:

this.customHtml = someHtmlVar;

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!