Я изучаю Angular JS и в настоящее время занимаюсь чатом, я хочу применить преобразование Javascript .shortnameToImage(str)
предлагаемое Emojione, в список сообщений в приложении чата на моем лицевом конце.
Это на моем html-индексе отображение сообщений
<ul>
<li ng-repeat="message in messages track by $index">
{{message}}
</li>
</ul>
Итак, я хочу, чтобы все в {{message}}
оценивалось так, если другой пользователь посылает: smile: ну улыбка emoji появляется без привлечения заднего конца.
До сих пор я пытался использовать функцию javascript, которая оценивает ввод пользователя и делает преобразование в элемент li
но работает над первым сообщением.
Какой лучший подход я могу предпринять, чтобы решить эту проблему?
Реальный Угловой способ - создать filter
самостоятельно (https://docs.angularjs.org/guide/filter) или использовать существующий https://github.com/globaldev/angular-emoji-filter. И тогда использование будет таким же простым, как {{message | emoji}}
{{message | emoji}}
.
Отредактировано с учетом комментариев Серхио
Javascript - хороший подход для этого. Вы можете циклически перемещать все ваши элементы li с помощью
var array_of_li = document.querySelectorAll("ul.messages li");
Затем вы можете преобразовать их с помощью простого цикла.
var array_of_li = document.querySelectorAll("ul.messages li");
for (var i = 0; i < array_of_li.length; i++) {
convert(array_of_li[i]);
}
И здесь код преобразования, основанный на документе emojione:
function convert(li_html) {
var input = li_html.innerHTML;
var output = emojione.shortnameToImage(input);
li_html.innerHTML = output;
}
Я собрал все это в этом jsfiddle, и он отображает приятную улыбку эмози.
eval
, а не evaluate
.
Глядя на свои документы, это довольно просто, и нет ошибок (если вам удалось установить их правильно, то есть)
http://git.emojione.com/demos/jsshortnametoimage.html
<ul>
<li ng-repeat="message in messages track by $index">
{{ emojione.shortnameToImage(message) }}
</li>
</ul>
ng-bind-html-unsafe="message | emoji"
. Он будет выводить сырой HTML без экранирования. НО вы должны принять во внимание последствия для безопасности - github.com/globaldev/angular-emoji-filter/issues/7