在HTML中使用Angular渲染HTML實體字符串

我從API接收HTML實體字符串（如此" Some text "），我希望將其呈現爲HTML。在HTML中使用Angular渲染HTML實體字符串

如果我用消毒經典HTML的解決方案：

.filter('html',function($sce){ 
    return function(input){ 
    return $sce.trustAsHtml(input); 
    } 
});

我獲得 Some text 作爲字符串代替和 被解釋爲HTML。

我現在看到的唯一解決方案是實現一些替換和應用後的過濾器。

是否有一個更清潔的解決方案，避免分析字符串兩次？

來源

2015-03-31 ChrisV

你是如何使用的HTML規劃？這是沿着你尋找什麼線：http://stackoverflow.com/questions/19415394/with-ng-bind-html-unsafe-removed-how-do-i-inject-html – joshwhatk 2015-03-31 13:23:50

如何創建自定義指令與此類似的動態模板：http://onehungrymind.com/angularjs-dynamic-templates/ – slotomo 2015-03-31 13:25:08

@joshwhatk我實際上不搜索相同的行爲，因爲我沒有從API的_html格式化字符串，但_htmlentities- formatted_字符串。然後，所有標籤都以unicode字符的形式轉義。目前，我正在使用String.replace替換所有&xxx;標記與他們的自定義函數的html代碼，然後我使用sce服務將轉換後的字符串解釋爲安全的html，但我問自己是否有更乾淨的解決方案。 – ChrisV 2015-03-31 13:45:30

而不是使用替代你可以做這樣的事情的：

input = angular.element('<div/>').html(input).text(); 
return $sce.trustAsHtml(input);

來源

2015-03-31 13:49:53 eladcon

這似乎是另一種解決方案，但它不是更消耗？ – ChrisV 2015-03-31 14:14:34

是啊可能..也許更安全 – eladcon 2015-03-31 14:35:31

您可以創建解析HTML實體的過濾器，就像這樣：

app.filter('trusted', ['$sce', function($sce) { 
var div = document.createElement('div'); 
return function(text) { 
    div.innerHTML = text; 
    return $sce.trustAsHtml(div.textContent); 
}; 
}]);

在此之前，是多了還是少說你說的。但現在，你可以這樣做：

<div ng-bind-html="'&lt;p&gt; Some text &lt;br /&gt;' | trusted"></div>

<div ng-bind-html="yourScopeVariable | trusted"</div>

它將呈現所需的HTML

來源

2016-12-19 17:40:00

在HTML中使用Angular渲染HTML實體字符串

回答

相關問題