html - 字符 "›"(›) 在 IE11 中打破 Angular

Question

我在 IE11 中使用字符时遇到问题。它在 angular 指令中的 jade 模板中使用，这只是 IE11 中的一个问题。

我有两个 span 标签，第一个包含字符“›”，下一个包含 {{ var }}。该变量在浏览器中按字面意思打印为“{{ var }}”而不是“val”，但是当我将第一个跨度内容更改为其他任何内容时，{{ var }} 被渲染为“val”。

我已经尝试使用 HTML 实体 (›)，但它仍然无法正常工作。我已经尝试了其他几个 HTML 实体，它们工作得很好。

这似乎是这个特定 Angular 色的问题。有谁知道这是为什么吗？

代码如下:

span.rsaquo  ›
span.subcategory  {{ category.subname }}

这是输出:

Answer 1

我曾在我的代码中直接使用双尖括号字符看到过这个问题。我还发现是在使用 ndash 字符时。我找到的解决方案是在任何您想使用这些有趣字符的地方使用 ng-bind-template 属性。

<span ng-bind-template="rsaquo >">
    <span>{{category.subname}}</span>
</span>

或

<span ng-bind-template="rsaquo >">
    <span ng-bind="category.subname"></span>
</span>

潜在的问题是 IE 停止处理具有这些字符的 DOM 元素上的 javascript(尽管我不确定为什么)。它仅对包含该字符的元素以及所有子元素进行沙盒处理。

只有当页面加载时该字符直接出现在 HTML 中时才会发生。这就是为什么如果将它放在 ng-bind-template 指令中，IE 直到所有内容都已加载并处理完所有内容后才会看到它。