Эмодзи и другие символы юникода не отображаются правильно в Angular
У меня есть веб-приложение, которое использует сообщения из Twitter, например.
Канал JSON используется для создания списка сообщений, но такие символы, как знаки вопроса, отображаются в виде ромба. Элемент выглядит так:
<div class="inner-message" ng-bind-html="unit.caption_text | linky:'_blank'"></div>
Когда я просматриваю URL JSON в Firefox и Chrome, они отображаются нормально.
Образец головы:
<!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}} внутри элемента, но он все еще ломает символы Юникода.
На данный момент мне нужно иметь возможность использовать фильтр ссылок, чтобы правильно отображать ссылки, поэтому необходим ng-bind-html, но я не верю, что это проблема.
Что-то происходит с ними в JavaScript, чтобы сломать кодировку?
Есть ли способ заставить их отображаться правильно?
ОбновитьЭто показывает значки по желанию, но «linky» не добавляет форматирование в ссылки.
<div class="inner-message">{{unit.text}}</div>
Это показывает сломанные символы
<div class="inner-message" ng-bind-html="unit.text | linky:'_blank'"></div>
В конце попал туда, внеся изменения, как подробно описано в «Запросе на вытягивание», который связал Майкл, чтобы не допустить путаницы в персонажах.
Я также обнаружил, что это помогает придать согласованность, если я добавлю Symbola в стек шрифтов для этих сообщений. Вы можете скачать Symbola сэта страница Джорджа Дуроса , Я провел его через конвертер .ttf в .woff, чтобы получить немного лучшую поддержку браузера, предлагая две альтернативы.