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

Question

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

这是我的html索引上的消息显示

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

因此，我的意图是对{{message}}中的所有内容进行评估，因此如果另一个用户发送：微笑：，那么微笑表情符号就会显示出来，而不会涉及后端。

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

我能采取什么样的最佳方法来解决这个问题？

Answer 1

真正的Angular方法是自己创建一个filter(https://docs.angularjs.org/guide/filter)或使用现有https://github.com/globaldev/angular-emoji-filter.然后使用就会像{{message | emoji}}一样简单。

Answer 2

编辑以反映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]);
}

这是基于表情符号文档的转换代码：

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

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

Answer 3

查看他们的文档，它非常简单，并且没有gotchas（如果您成功地正确安装了它，也就是说）

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

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