Comment interpréter des modèles angulaires dans du HTML dynamique dans AngularJS ?

Gérer l'interprétation des modèles angulaires dans Ng-bind-html

Le défi :

Dans AngularJS, le ng- La directive bind-html permet l'inclusion de contenu HTML dynamique dans les modèles. Cependant, lorsque vous tentez d'inclure des modèles angulaires eux-mêmes, ils restent ininterprétés, apparaissant simplement sous forme de HTML brut.

La solution :

Pour surmonter ce problème, envisagez d'utiliser un outil externe. directive qui permet la compilation d’expressions angulaires dans un contenu inclus dynamiquement. L'une de ces directives est la directive "angular-bind-html-compile" trouvée sur https://github.com/incuna/angular-bind-html-compile.

Implémentation :

1. Installez la directive angulaire-bind-html-compile.
2. Incorporez la directive dans le module Angular.
3. Utilisez la directive dans le modèle pour lier la dynamique souhaitée Contenu HTML.

Exemple :

Considérez un scénario dans lequel le contenu dynamique souhaité est dérivé d'une réponse API.

Code du contrôleur :

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

Réponse JSON :

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

Code du modèle :

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

Résultat :

<code class="html"><span>Dear John,</span></code>

Conclusion :

En incorporant la directive "angular-bind-html-compile", les développeurs peuvent compiler efficacement des expressions angulaires intégrées dans du contenu HTML dynamique, permettant l'interprétation de modèles qui étaient auparavant traités comme du HTML brut.

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!