Html - rendre un texte contenant des balises html affiche les balises en texte brut

Question

J'utilise angularJS, où j'ai une propriété 'description', que je dois afficher à l'utilisateur. Le problème est que cette propriété contient du code html, qui est affiché à l'utilisateur en texte brut. Voici mon code:

<span class="cst-bold">Activity description </span> 
{{pack.activities.current['description']}} 

J'ai essayé aussi d'entourer la variable avec

, mais il n'a pas non plus résoudre quoi que ce soit. Juste un petit format différent. Voici le résultat après avoir utilisé la balise <pre>:

Comment puis-je résoudre le problème avec les balises? Je vous remercie!

Answer 1

utiliser un filtre personnalisé de confiance et ng-bind-html Exemple

angular.module('app',[]) 
 
.controller('Ctrl',function($scope){ 
 
    $scope.description="<h1>Hallo World!</h1>"; 
 
}) 
 
.filter('trusted', function($sce){ 
 
    return function(html){return $sce.trustAsHtml(html) 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="Ctrl"> 
 
    <span class="cst-bold">Activity description </span> 
 
    <span>{{description}}</span> 
 
    <span ng-bind-html="description|trusted"></span> 
 
</div>