Wie kompiliere ich dynamisch eingebundene Angular-Vorlagen mit ng-bind-html?

angular.js: Kompilieren von dynamisch eingebundenem HTML-Code mit ng-bind-html

Bei der Arbeit mit angle.js können bestimmte Szenarien auftreten Hier müssen Sie HTML-Code dynamisch in eine Vorlage einbinden. Um dies zu erreichen, wird normalerweise die Direktive ng-bind-html verwendet. Wenn Sie jedoch versuchen, Angular-Vorlagen mit diesem Ansatz einzubinden, werden sie möglicherweise nicht interpretiert und stattdessen einfach ohne Funktionalität in die Seite eingebunden.

Lösung

Stattdessen Mit hartcodierten Vorlagen können Sie eine Lösung verwenden, mit der Sie Angular-Ausdrücke kompilieren können, die in eine API-Antwort eingebettet sind. Hier ist eine Schritt-für-Schritt-Anleitung:

Schritt 1: Installieren Sie die Direktive „angular-bind-html-compile“ von GitHub: https://github.com/incuna/angular-bind -html-compile

Schritt 2: Fügen Sie die Direktive in Ihr Angular-Modul ein:

<code class="javascript">angular.module("app", ["angular-bind-html-compile"])</code>

Schritt 3: Nutzen Sie die Direktive in Ihrem Vorlage wie folgt:

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

Beispiel:

Controller-Objekt:

<code class="javascript">$scope.letter = { user: { name: "John" } };</code>

JSON-Antwort :

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

HTML-Ausgabe:

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

Erklärung:

Die Angular-Bind- Die Direktive „html-compile“ überwacht Änderungen am Ausdruck, der im Attribut „bind-html-compile“ bereitgestellt wird. Wenn sich der Wert ändert, aktualisiert es den HTML-Inhalt des Elements und kompiliert alle darin enthaltenen Angular-Ausdrücke mithilfe des $compile-Dienstes. Dadurch können Sie Angular-Vorlagen dynamisch mit ng-bind-html einbinden und ausführen.

Zusätzliche Referenz:

Hier ist der relevante Direktivencode als Referenz:

<code class="javascript">(function () {
    'use strict';

    var module = angular.module('angular-bind-html-compile', []);

    module.directive('bindHtmlCompile', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                scope.$watch(function () {
                    return scope.$eval(attrs.bindHtmlCompile);
                }, function (value) {
                    element.html(value);
                    $compile(element.contents())(scope);
                });
            }
        };
    }]);
}());</code>

Das obige ist der detaillierte Inhalt vonWie kompiliere ich dynamisch eingebundene Angular-Vorlagen mit ng-bind-html?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!