ng-bind-html删除<（小于符号）后的内容

Question

我正在使用棱角分距v1.5.6。我有一些用户输入的html数据以及存储在数据库中的特殊字符。为了显示，

var txt = "<span class='txt_bold'> content with <lessthan signs<span> <span>";

var txt1 = "<span class='txt_bold'> content with <4 lessthan >greaterthan signs <span>";

当我在ng-bind-html指令中加上两行时，我得到的输出如下。

txt : content with 
txt1 : content with <4 lessthan >greaterthan signs

正如我们可以看到在txt的<（小于）符号被指令删除后的单词。我尝试了以下线程中提供的解决方案但是，他们都没有为我保持html css效果工作。

1. ng-bind-html work partially than expected
2. Insert HTML into view

任何提示都将受到高度赞赏。

Answer 1

<span class='txt_bold'> content with <lessthan signs<span> <span>

正如我们可以看到，在指令中删除了来自txt的<（小于）符号之后的单词

那是不对的。该字符串实际上被解析为：

<span class="txt_bold">
  content with
  <lessthan signs<span>
    <span></span>
  </lessthan>
</span>

<lessthan没有被删除;它被解析为<lessthan>标签。它没有被删除;它被渲染为空。

要逃避解析使用html entities：

<lessthan

有关更多信息，请参阅MDN Web API Reference - innerHTML operational details