Parsen der ng-bind-html-Direktive in AngularJS-HTML-Tutorial-php.cn

Parsen der ng-bind-html-Direktive in AngularJS

怪我咯

Freigeben： 2017-04-30 10:55:40

Original

1878 Leute haben es durchsucht

Der Unterschied zwischen ng-bind-html und ng-bind besteht darin, dass ng-bind den Wert als Zeichenfolge annimmt und an den Inhalt des Elements bindet, ng-bind-html jedoch den Wert als HTML annimmt und ihn bindet zum HTML des Elements. Entspricht .text() und .html() in jq. Dieser Artikel gibt Ihnen hauptsächlich eine ausführliche Einführung in die relevanten Informationen der ng-bind-html-Direktive in AngularJS. Freunde in Not können darauf zurückgreifen.

Vorwort

Wenn Sie Daten an HTML-Tags binden und der gebundene Inhalt einfacher Text ist, können Sie {{} } oder ng- verwenden. binden. Wenn Inhalte jedoch mit HTML-Tags an HTML-Tags gebunden werden, rendert AngularJS diese aus Sicherheitsgründen nicht in HTML, sondern zeigt sie direkt auf der Seite als Text an.

Schauen wir uns zunächst ein Beispiel an

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script src="js/angular.min.js"></script>
 <script>
 angular.module("myapp", []).controller("MyController", function ($scope) {
 $scope.content = "<h1>Hello world.</h1>";
 $scope.txt = "Hello txt world";
 });
 </script>
</head>
<body ng-app="myapp">
 <p ng-controller="MyController">
 {{content}}
 <p ng-bind="content"></p> 
 </p>
</body>
</html>

Nach dem Login kopieren

Ausgabe

ng-bind-html-Befehl

 <p ng-bind-html="content"></p>

Nach dem Login kopieren

Sicherheit wird zu diesem Zeitpunkt angezeigt Fehler, wie im Bild gezeigt:

Aber Sie können automatisch erkennen, ob der Inhalt von HTML sicher ist, indem Sie das folgende Modul einführen

 <script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script>

 <script>
 angular.module("myapp", ["ngSanitize"]).controller("MyController", function ($scope) {
 $scope.content = "<h1>Hello world.</h1>";
 $scope.txt = "Hello txt world";
 });
 </script>

Nach dem Login kopieren

Aktualisieren Sie die Vorschau zu diesem Zeitpunkt

Also die

ng-bind- Der HTML-Befehl ist eine sichere Möglichkeit, Inhalte an HTML-Elemente zu binden.

Wenn Sie möchten, dass AngularJS HTML in Ihre Anwendung schreibt, müssen Sie gefährlichen Code erkennen. Durch die Einführung des Moduls „angular-santize.js“ in Ihre Anwendung können Sie mithilfe der ngSanitize-Funktion die Sicherheit Ihres Codes ermitteln. In Ihrer Anwendung können Sie dies tun, indem Sie den HTML-Code über die ngSanitize-Funktion ausführen.

Eine andere Möglichkeit, damit umzugehen, ist die benutzerdefinierte Filterung. Der Prozessor behandelt Inhalte mit HTML-Tags als sicher.

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