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: Einbinden Modul

Fügen Sie die Direktive zum AngularJS-Modul hinzu:

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

Schritt 3: Verwendung in der Vorlage

In der Vorlage verwenden Sie die bind-html-compile-Direktive, um das Gewünschte einzufügen Inhalt:

Beispiel:

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

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

Ergebnis:

  Dear John,

Hinweis: Die Direktive überwacht Änderungen im gebundenen Ausdruck und kompiliert den Inhalt bei Bedarf neu. Dadurch kann AngularJS-Code, der in eine API-Antwort eingebettet ist, dynamisch interpretiert und ausgeführt werden.