ng-bind-html angular et directive en son sein

J’étais également confronté à ce problème et après des heures de recherche sur Internet, j’ai lu le commentaire de @ Chandermani, qui s’est avéré être la solution. Vous devez appeler une directive “comstackr” avec ce modèle:

HTML:

JS:

 .directive('comstack', ['$comstack', function ($comstack) { return function(scope, element, attrs) { scope.$watch( function(scope) { // watch the 'comstack' expression for changes return scope.$eval(attrs.comstack); }, function(value) { // when the 'comstack' expression changes // assign it into the current DOM element.html(value); // comstack the new DOM and link it to the current // scope. // NOTE: we only comstack .childNodes so that // we don't get into infinite loop compiling ourselves $comstack(element.contents())(scope); } ); }; }]) 

Vous pouvez voir un violon de travail de celui-ci ici

Merci pour l’excellente réponse de vkammerer. Une optimisation que je recommanderais est de ne pas regarder après la compilation une fois. Le paramètre $ eval dans l’expression de surveillance peut avoir des conséquences sur les performances.

  angular.module('vkApp') .directive('comstack', ['$comstack', function ($comstack) { return function(scope, element, attrs) { var ensureComstackRunsOnce = scope.$watch( function(scope) { // watch the 'comstack' expression for changes return scope.$eval(attrs.comstack); }, function(value) { // when the 'comstack' expression changes // assign it into the current DOM element.html(value); // comstack the new DOM and link it to the current // scope. // NOTE: we only comstack .childNodes so that // we don't get into infinite loop compiling ourselves $comstack(element.contents())(scope); // Use un-watch feature to ensure compilation happens only once. ensureComstackRunsOnce(); } ); }; }]); 

Voici un violon fourchu et mis à jour.

Ajouter cette directive angular-bind-html-comstack

 .directive('bindHtmlComstack', ['$comstack', function ($comstack) { return { ressortingct: 'A', link: function (scope, element, attrs) { scope.$watch(function () { return scope.$eval(attrs.bindHtmlComstack); }, function (value) { // Incase value is a TrustedValueHolderType, sometimes it // needs to be explicitly called into a ssortingng in order to // get the HTML ssortingng. element.html(value && value.toSsortingng()); // If scope is provided use it, otherwise use parent scope var comstackScope = scope; if (attrs.bindHtmlScope) { comstackScope = scope.$eval(attrs.bindHtmlScope); } $comstack(element.contents())(comstackScope); }); } }; }]); 

Utilisez-le comme ceci:

Vraiment facile 🙂

Malheureusement, je n’ai pas assez de réputation pour commenter.

Je ne pouvais pas faire travailler ça pendant des années. J’ai modifié mon code ng-bind-html pour utiliser cette directive personnalisée, mais je n’ai pas réussi à supprimer le $scope.html = $sce.trustAsHtml($scope.html) requirejs pour que ng-bind-html fonctionne. Dès que j’ai supprimé ceci, la fonction de compilation a commencé à fonctionner.

Pour quiconque $sce.trustAsHtml contenu qui a déjà été exécuté via $sce.trustAsHtml voici ce que je devais faire différemment

 function(scope, element, attrs) { var ensureComstackRunsOnce = scope.$watch(function(scope) { return $sce.parseAsHtml(attrs.comstack)(scope); }, function(value) { // when the parsed expression changes assign it into the current DOM element.html(value); // comstack the new DOM and link it to the current scope. $comstack(element.contents())(scope); // Use un-watch feature to ensure compilation happens only once. ensureComstackRunsOnce(); }); } 

Ceci est seulement la partie link de la directive car j’utilise une disposition différente. Vous devrez injecter le service $sce ainsi que $comstack .

La meilleure solution que j’ai trouvée! Je l’ai copié et cela fonctionne exactement comme je le souhaitais. Merci, merci, merci …

dans la fonction de lien directif j’ai

 app.directive('element',function($comstack){ . . var addXml = function(){ var el = $comstack('')($scope); $scope.renderingElement = el.html(); } . . 

et dans le modèle de directive: