Question

我正在尝试使用ng-bind-html-unsafe属性在模板中插入HTML。但由于某种原因，它不起作用。

我的代码：

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

我无法看到HTML。如果我将ng-bind-html-unsafe="value.button"更改为ng-bind-html-unsafe="{{value.button}}"，那么它会在属性中显示HTML，如下所示：

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

Answer 1

好的，我找到了解决方法：

JS：

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

HTML：

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

Answer 2

制作一个像这样的过滤器

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

并将其作为过滤器应用于ng-bind-html，如

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

Angular JS在标记内显示HTML

2 个答案: