Как применить Emojis к списку директив Angularjs?

0

Я изучаю 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 но работает над первым сообщением.

Какой лучший подход я могу предпринять, чтобы решить эту проблему?

Теги:
emoji

3 ответа

0
Лучший ответ

Реальный Угловой способ - создать filter самостоятельно (https://docs.angularjs.org/guide/filter) или использовать существующий https://github.com/globaldev/angular-emoji-filter. И тогда использование будет таким же простым, как {{message | emoji}} {{message | emoji}}.

  • 0
    Спасибо за это направление кажется самым логичным. Я пытался использовать его, но допустим, я послал: smile: Я должен вернуть улыбку смайликов, верно? Все, что я получаю, это <i class = 'emoji emoji_smile'> smile </ i> есть идеи, что может происходить?
  • 0
    Ожидается, что, как и в моем ответе, при использовании двойных фигурных скобок HTML-код экранируется, и выводится исходный код. Angular-emoji-filter ожидает, что вы будете использовать вместо этого ng-bind-html-unsafe="message | emoji" . Он будет выводить сырой HTML без экранирования. НО вы должны принять во внимание последствия для безопасности - github.com/globaldev/angular-emoji-filter/issues/7
Показать ещё 1 комментарий
0

Отредактировано с учетом комментариев Серхио

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, и он отображает приятную улыбку эмози.

  • 0
    Это не та оценка, которую он имел в виду.
  • 0
    Кроме того, вы, вероятно, имели в виду eval , а не evaluate .
Показать ещё 3 комментария
-1

Глядя на свои документы, это довольно просто, и нет ошибок (если вам удалось установить их правильно, то есть)

http://git.emojione.com/demos/jsshortnametoimage.html

<ul>
   <li ng-repeat="message in messages track by $index">    
      {{ emojione.shortnameToImage(message) }}
   </li>
</ul>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню