将 HTML 字符串查看为 HTML

Question

我有一些自动生成的 html 代码在我的 angularJS 应用程序中突出显示了一些文本。生成 html 代码的行是这一行：

var replaced = original.replace(regEx, '<span style="background-color: red;">' + replacing + '</span>');
line[key + 'HL'] = replaced;

但是在模板上写这个

<div><p>{{line.codeHL ? line.codeHL : line.code}} {{line.price}}</p></div>

显示这个：

<span style="background-color: red;">GD5AU211</span> 102€

如何强制计算字符串中的 html 代码？

另外，由于某些原因我无法使用 document.getElementById()。

Answer 1

如果您使用 angular 4 则使用 innerHTML

<div><p>

   <div [innerHTML]="line.codeHL ? line.codeHL : line.code">
    </div> {{line.price}}

</p></div>

如果您使用 angular 1 则使用 ng-bing-html

<div><p>
       <div ng-bind-html="line.codeHL ? line.codeHL : line.code | cust">
        </div> {{line.price}}
</p></div>

现在像这样创建一个 cust 过滤器

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

Answer 2

参考这个link。这可能是您要寻找的： AngularJS : Insert HTML into view

要启用 html 插入视图，您必须使用 $sce.trustAsHtml()

将 html 定义为可信数据

希望这会有所帮助。

Answer 3

在必须显示为文本的 html 之前添加 <xmp> 标签。

var replaced = original.replace(regEx, '<span style="background-color: red;"><xmp>' + replacing + '</xmp></span>');

Viewing HTML string as HTML