Heim > Web-Frontend > js-Tutorial > Wie rendere ich HTML-Fragmente sicher in AngularJS-Ansichten?

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

Linda Hamilton
Freigeben: 2024-12-20 14:31:17
Original
501 Leute haben es durchsucht

How to Safely Render HTML Fragments in AngularJS Views?

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:

1

2

3

var SomeController = function () {

    this.customHtml = '<ul><li>render me please</li></ul>';

}

Nach dem Login kopieren

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

1

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

Nach dem Login kopieren

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

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

    // ...

});

Nach dem Login kopieren

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

1

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

Nach dem Login kopieren

NgSanitize verwenden

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

1

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

Nach dem Login kopieren

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

1

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

Nach dem Login kopieren

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

1

this.customHtml = someHtmlVar;

Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage