Comment compiler dynamiquement des modèles angulaires imbriqués avec ng-bind-html ?

AngularJS : compilation de modèles angulaires imbriqués avec ng-bind-html

Problème :

L'utilisation de ng-bind-html pour inclure dynamiquement des modèles angulaires entraîne l'affichage des modèles en HTML brut au lieu d'être interprétés et exécutés.

Solution :

Pour compiler Angular modèles dans ng-bind-html, exploitez la directive tierce "angular-bind-html-compile".

Mise en œuvre :

Étape 1 : Installez la directive en utilisant :

npm install angular-bind-html-compile

Étape 2 : Ajoutez la directive à votre module Angular :

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

Étape 3 : Dans votre modèle, utilisez la directive bind-html-compile sur l'élément où vous souhaitez inclure dynamiquement du HTML :

<code class="html"><div bind-html-compile="myDynamicHtml"></div></code>

Exemple :

Dans votre contrôleur :

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

Dans votre modèle :

<code class="html"><div bind-html-compile="myDynamicHtml"></div></code>

Notes :

• La directive surveillera les changements dans la valeur attribué à l'attribut bind-html-compile et recompilez le code HTML en conséquence.
• Cette solution vous permet de restituer dynamiquement des modèles angulaires dans ng-bind-html, quel que soit le contenu ou la complexité des modèles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!