在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实体字符串

回答

相关问题