Comment compiler des modèles angulaires inclus dynamiquement avec ng-bind-html ?

angular.js : Compilation de code HTML inclus dynamiquement à l'aide de ng-bind-html

Lorsque vous travaillez avec angulaire.js, vous pouvez rencontrer des scénarios où vous devez inclure dynamiquement du code HTML dans un modèle. Pour y parvenir, la directive ng-bind-html est généralement utilisée. Cependant, lorsque vous tentez d'inclure des modèles angulaires en utilisant cette approche, ils peuvent ne pas être interprétés et simplement être inclus dans la page sans aucune fonctionnalité.

Solution

Au lieu de à l'aide de modèles codés en dur, vous pouvez utiliser une solution qui vous permet de compiler des expressions angulaires intégrées dans une réponse API. Voici un guide étape par étape :

Étape 1 : Installez la directive angulaire-bind-html-compile depuis GitHub : https://github.com/incuna/angular-bind -html-compile

Étape 2 : Incluez la directive dans votre module Angular :

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

Étape 3 : Utilisez la directive dans votre modèle comme suit :

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

Exemple :

Objet contrôleur :

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

Réponse JSON :

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

Sortie HTML :

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

Explication :

La liaison angulaire- La directive html-compile surveille les modifications apportées à l'expression fournie dans l'attribut bind-html-compile. Lorsque la valeur change, il met à jour le contenu HTML de l'élément et compile toutes les expressions angulaires qu'il contient à l'aide du service $compile. Cela vous permet d'inclure et d'exécuter dynamiquement des modèles angulaires à l'aide de ng-bind-html.

Référence supplémentaire :

Voici le code de la directive pertinente pour votre référence :

<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>

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!