我有一个使用Twitter消息的Web应用程序。
使用JSON提供数据来构建消息列表,但是像 这样的字符显示为带问号的菱形。该元素如下所示:
<div class="inner-message" ng-bind-html="unit.caption_text | linky:'_blank'"></div>
当我在Firefox和Chrome中查看JSON URL时,它们都正常显示。
头文件示例:
<!DOCTYPE html>
<html class="wf-opensans-n4-active wf-active" lang="en">
<head>
<meta charset="utf-8">
我在调试时发现一件事情:当所有消息都在一个对象数组中,而不是$scope的一部分时,我可以将它们添加到页面上并正确显示表情符号。
所以我认为这与Angular有关。我尝试将ng-bind-html更改为ng-bind,但那样做没有效果。我尝试删除ng-bind-html并在元素内使用{{unit.caption_text}},但仍会破坏Unicode字符。
目前,我需要能够使用linky筛选器来正确显示链接,因此ng-bind-html是必需的,但我不认为它是问题的原因。
它们在JavaScript中是否遇到了什么问题而导致编码错误?
有办法使它们正确显示吗?
更新
这样显示图标就像预期的那样,但“linky”不会对链接添加格式。
<div class="inner-message">{{unit.text}}</div>
这显示了损坏的字符。
<div class="inner-message" ng-bind-html="unit.text | linky:'_blank'"></div>
更新2
最终完成了,按照Michael提供的Pull Request中详细说明的更改方法,解决了字符被搞乱的问题。
我还发现,如果在这些消息的字体栈中加入Symbola会有更好的一致性。你可以从George Douros的这个页面下载Symbola字体。我将它通过.ttf到.woff转换器进行了转换,获得了两个替代品,以获得稍微更好的浏览器支持。