Wie kompiliere ich AngularJS-Code in ng-bind-html?

AngularJS-Code mit ng-bind-html kompilieren

In AngularJS kann die Direktive ng-bind-html HTML-Inhalte dynamisch in ein einfügen Sicht. Wenn der enthaltene Inhalt jedoch AngularJS-Code enthält, wird dieser nicht richtig interpretiert. Hier entsteht das Problem der Kompilierung von AngularJS-Code innerhalb von ng-bind-html.

Um dieses Problem zu lösen, kann eine externe Direktive namens „angular-bind-html-compile“ verwendet werden. Hier ist eine Schritt-für-Schritt-Lösung:

Schritt 1: Installation

Installieren Sie die Angular-bind-html-compile-Direktive von GitHub: https://github. com/incuna/angular-bind-html-compile

Schritt 2: In Modul einbinden

Direktive zum AngularJS-Modul hinzufügen:

angular.module("app", ["angular-bind-html-compile"])

Schritt 3: Verwendung in der Vorlage

Verwenden Sie in der Vorlage die Anweisung bind-html-compile, um den gewünschten Inhalt einzufügen:

<div bind-html-compile="letterTemplate.content"></div>

Beispiel:

// Controller Object
$scope.letter = { user: { name: "John"}};

// JSON Response
{ "letterTemplate":[
    { content: "<span>Dear {{letter.user.name}},</span>" }
]}

Ergebnis:

<code class="html"><div bind-html-compile="letterTemplate.content">
  <span>Dear John,</span>
</div></code>

Hinweis: Die Direktive überwacht Änderungen im gebundenen Ausdruck und führt eine Neukompilierung durch den Inhalt, wann immer es nötig ist. Dadurch kann AngularJS-Code, der in eine API-Antwort eingebettet ist, dynamisch interpretiert und ausgeführt werden.

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