Angular JS在標籤內顯示HTML

我試圖使用ng-bind-html-unsafe屬性在模板內插入HTML。但由於某種原因，它不起作用。Angular JS在標籤內顯示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>

來源

2014-02-17 Niraj Chauhan

嘗試包括你的模塊和NG綁定，HTML中「ngSanitize」模塊中的標記 – Whisher

什麼版本角你在用嗎？ Angular版本1.2中刪除了「ng-bind-html-unsafe」。 –

@DavinTryon我正在使用1.2.9 –

113

好，我找到了這個解決方案：

JS：

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

HTML：

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

來源

2014-02-17 12:56:17

Woah這是唯一一個可以工作的人！我已經嘗試了一切，謝謝:) – anpatel

+14

這是唯一對我有效的解決方案。一定要將$ sce注入到控制器中。 –

這工作，但似乎有點矯枉過正。我必須爲每個控制器注入$ sce？並且必須將'renderHtml'函數添加到需要html的每個控制器？ –

製作這樣的過濾器

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

，並應用此作爲過濾器的NG-綁定-HTML一樣

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

來源

2016-03-27 13:49:32

上面接受的答案有很多的選票，但我認爲這個解決方案是一個更好的答案。這樣做將解決必須將$ sce注入每個將顯示html的控制器的問題。雖然我還是新手，但請隨時糾正我！ – Jubskie

Angular JS在標籤內顯示HTML

回答

相關問題