使用Angular在HTML中渲染HTML实体字符串

Question

我从API接收了HTML实体字符串（例如"<p> Some text <br />" ），并且希望将其呈现为HTML。

如果我将经典HTML解决方案与sanitize结合使用：

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

我得到<p> Some text <br /> <p> Some text <br /> 作为字符串，而不是将<p>和<br>解释为HTML。

我现在看到的唯一解决方案是实现一些替换，然后再应用过滤器。

有没有一种更清洁的解决方案，可以避免两次解析字符串？

Answer 1

除了使用replace之外，您可以执行以下操作：

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

Answer 2

您可以创建一个过滤器来解析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