Angular JS在标签内显示HTML

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>

- Niraj Chauhan

---

尝试在你的模块中包含'ngSanitize'模块，并在你的标记中使用'ng-bind-html'。 - Whisher

你使用的 Angular 版本是什么？ng-bind-html-unsafe 已在 Angular 1.2 版本中被移除。 - Davin Tryon

@DavinTryon 我正在使用1.2.9版本。 - Niraj Chauhan

请查看ng-bind-html。您需要与$sce服务一起使用此指令。 - Davin Tryon

Answer 1

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

JS：

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

HTML：

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

- Niraj Chauhan

---

哇，这个是唯一一个有效的！我尝试了所有方法，谢谢 :) - anpatel

这是我使用过唯一有效的解决方法。请确保将$sce注入到您的控制器中。 - Erik Olson

这个可以用，但似乎有点过度。我必须在每个控制器中注入$sce吗？并且需要将renderHtml函数添加到每个需要html的控制器中吗？ - Andrew Gee

这是唯一对我有效的解决方案。在此其他 SO 帖子中接受的答案：https://dev59.com/iWox5IYBdhLWcg3wLhUA 并没有起作用。 - TMc

为了使这个工作正常，确保在控制器中定义的函数中注入$sce，就像这样：myApp.controller('myCtrl', function($scope, $sce) {。 - Devner

Answer 2

制作一个类似这样的过滤器。

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

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

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

- Ruben Decrop

---

上面被接受的答案得到了很多投票，但我认为这个解决方案是更好的答案。用这种方式做将解决每个控制器都需要注入$sce来显示HTML的问题。虽然我还是新手，所以请随意纠正我！ - Jubskie