web-dev-qa-db-fra.com

Angular JS affiche HTML dans la balise

J'essaie d'insérer du HTML à l'intérieur du modèle en utilisant ng-bind-html-unsafe attribut. Mais pour une raison quelconque, cela ne fonctionne pas.

Mon code:

<tr class="white two-button" ng-repeat="(key,value) in recommendations | ojoScoreFilter:ojoScore | relevancyScoreFilter:relevancyScore | orderBy:predicate:reverse">
<td>
<div ng-bind-html-unsafe="value.button"></div>
</td>
</tr>

Je ne peux pas voir le HTML. Si je change ng-bind-html-unsafe="value.button" à ng-bind-html-unsafe="{{value.button}}" alors il montre HTML mais dans l'attribut, quelque chose comme ceci:

<div ng-bind-html-unsafe="&lt;a class=&quot;action_hrefs full-width bgcolor10 purple-hover flat-button flat-white-button btn&quot; data-value=&quot;947&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-lock&quot;&gt;&lt;/i&gt;&nbsp;Unlock&lt;/a&gt;"></div>
htmlangularjsng-bind-html
32
Niraj Chauhan

Ok j'ai trouvé une solution pour ça:

JS:

$scope.renderHtml = function(html_code)
{
    return $sce.trustAsHtml(html_code);
};

HTML:

<p ng-bind-html="renderHtml(value.button)"></p>
120
Niraj Chauhan

faire un filtre comme celui-ci

.filter('trusted',
   function($sce) {
     return function(ss) {
       return $sce.trustAsHtml(ss)
     };
   }
)

et l'appliquer en tant que filtre au ng-bind-html comme

<div ng-bind-html="code | trusted">
13
Ruben Decrop