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

AngularJS: Kompilieren verschachtelter Angular-Vorlagen mit ng-bind-html

Problem:

Die Verwendung von ng-bind-html zum dynamischen Einbinden von Angular-Vorlagen führt dazu, dass die Vorlagen als einfaches HTML angezeigt werden, anstatt interpretiert und ausgeführt zu werden.

Lösung:

Um Angular zu kompilieren Vorlagen in ng-bind-html nutzen die Drittanbieter-Direktive „angular-bind-html-compile“.

Implementierung:

Schritt 1: Installieren Sie die Direktive mit:

npm install angular-bind-html-compile

Schritt 2: Fügen Sie die Direktive zu Ihrem Angular-Modul hinzu:

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

Schritt 3:Verwenden Sie in Ihrer Vorlage die Anweisung bind-html-compile für das Element, in das Sie HTML dynamisch einbinden möchten:

<code class="html">&lt;div bind-html-compile=&quot;myDynamicHtml&quot;&gt;&lt;/div&gt;</code>

Beispiel:

In Ihrem Controller:

<code class="javascript">$scope.myDynamicHtml = "&lt;div ng-controller='myController'&gt;&lt;span&gt;Hello {{ myName }}&lt;/span&gt;&lt;/div&gt;";</code>

In Ihrer Vorlage:

<code class="html">&lt;div bind-html-compile=&quot;myDynamicHtml&quot;&gt;&lt;/div&gt;</code>

Hinweise:

• Die Direktive überwacht Änderungen im Wert dem bind-html-compile-Attribut zugewiesen und den HTML-Code entsprechend neu kompiliert.
• Mit dieser Lösung können Sie Angular-Vorlagen dynamisch in ng-bind-html rendern, unabhängig vom Inhalt oder der Komplexität der Vorlagen.

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