如何将表情符号应用于 Angularjs 指令列表？

Question

我正在学习 Angular JS，目前正在做一个聊天应用程序，我想将 Emojione 提供的 Javascript 转换 .shortnameToImage(str) 应用到聊天应用程序中的消息列表在我的前端。

这是我的 html 索引消息显示

<ul>
  <li ng-repeat="message in messages track by $index">    
    {{message}}
  </li>
</ul>

所以，我的意图是 {{message}} 中的所有内容都得到评估，所以如果另一个用户发送 :smile: 那么微笑表情符号就会显示出来而不涉及后端.

到目前为止，我已经尝试使用 javascript 函数来评估用户输入并转换为 li 元素，但对第一条消息有效。

解决此问题的最佳方法是什么？

Answer 1

已编辑以反映 Sergio 的评论

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 doc的转换代码：

function convert(li_html) {
    var input = li_html.innerHTML;
    var output = emojione.shortnameToImage(input);
    li_html.innerHTML = output;
}

我将所有这些都放在了这个 jsfiddle 中，它显示了一个漂亮的表情符号微笑。

Answer 2

看看他们的文档，它非常简单，没有陷阱（如果你设法正确安装它，那就是）

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

Answer 3

真正的 Angular 方法是自己创建一个 filter (https://docs.angularjs.org/guide/filter) or use existing https://github.com/globaldev/angular-emoji-filter。然后使用就和 {{message | emoji}}.

一样简单

How to apply Emojis to Angularjs directive list?