Detaillierte Erläuterung der ng-bind-html-Direktive von AngularJS

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der ng-bind-html-Anweisung von angularJS geben. Was sind die Vorsichtsmaßnahmen bei der Verwendung der ng-bind-html-Anweisung von angleJS? Das Folgende ist ein praktischer Fall. Schauen wir uns das an.

Eine der leistungsstarken Funktionen von Angular Js ist die bidirektionale Datenbindungsfunktion. Zwei Dinge, die wir häufig verwenden, sind ng-bind und ng-model für Formulare. In unserem Projekt werden wir jedoch auf eine solche Situation stoßen. Die vom Hintergrund zurückgegebenen Daten enthalten verschiedene HTML-Tags. Zum Beispiel:

$scope.text = “hello,<br><b> 这是一个例子</b>”

Wir verwenden Anweisungen wie ng-bind-html zum Binden, aber das Ergebnis ist nicht das, was wir wollen. Es geht so:
Hallo, das ist ein Beispiel (der B-Tag-Stil, den wir für den Text festgelegt haben, geht verloren)

Nach langem Debuggen habe ich das Problem endlich behoben und gelöst. , aber die harte Arbeit lohnt sich trotzdem, schließlich muss ich mehr Code lernen, um das herauszufinden.

Der Grund ist folgender:

AngularJS gibt den Text standardmäßig in Textform aus, wenn die Datenbindung durchgeführt wird, d. h. die HTML-Tags in Ihren Daten werden verwendet Alle Escapezeichen werden nicht verarbeitet, was die Sicherheit erhöht und Injektionsangriffe in HTML-Tags verhindert. Wenn unser Anwendungsszenario jedoch der Artikeldetailseite ähnelt und der formatierte Text aus der Datenbank gelesen wird, kann er nicht normal auf der Seite angezeigt werden. Wie folgt:

$scope.htmlStr = &#39;<p style="color:red;font-size=18px;"></p>&#39;;

Zu diesem Zeitpunkt müssen wir den $sce-Dienst nutzen, um unser Problem zu lösen. Das sogenannte sce ist die Abkürzung für „Strict Contextual Escaping“. Ins Chinesische übersetzt bedeutet es „strenger Kontextmodus“, was auch als sichere Bindung verstanden werden kann. Diese Methode wandelt den Wert in einen Wert um, der von der Berechtigung akzeptiert wird und mit „ng-bind-html“ sicher gebunden werden kann.
Sehen wir uns an, wie man es verwendet:

Kapseln Sie es in einen Filter und Sie können es jederzeit in der Vorlage aufrufen

//注册一个过滤器，挂载到任意一个angular.module下，如果自定义过滤器较多，可以提取出来一个公用的过滤器module
    .filter('to_trusted', ['$sce', function ($sce) {        return function (text) {            return $sce.trustAsHtml(text);
        };
    }]);//然后在页面中这样使用<p ng-bind-html="article.text | to_trusted"></p>

$sce ist angleJS Das integrierte Sicherheitsverarbeitungsmodul, die Methode $sce.trustAsHtml(input), analysiert den Dateninhalt und gibt ihn in Form von HTML zurück. Das Hinzufügen dieses Filters zu den von ng-bind-html gebundenen Daten ermöglicht das automatische Escapen von HTML-Tags beim Laden der Daten.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Webschnittstellen-Verwaltungstool

Was soll ich tun, wenn der Text in der ionischen Anwendung nicht möglich ist? Zum Kopieren oder Einfügen lange gedrückt halten?

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der ng-bind-html-Direktive von AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!