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

【问题标题】：How to apply Emojis to Angularjs directive list?如何将表情符号应用于 Angularjs 指令列表？
【发布时间】：2015-06-30 07:45:09
【问题描述】：

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

这是在我的 html 索引中显示的消息

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

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

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

感谢这个方向似乎是最合乎逻辑的方向。我尝试使用它，但可以说我发送了一个 :smile: 我应该找回微笑表情符号，对吗？我得到的只是 smile 知道会发生什么吗？
这是预期的，正如我在使用双花括号时的回复中一样，HTML 被转义，从而输出源代码。 Angular-emoji-filter 希望你改用ng-bind-html-unsafe="message | emoji"。它将输出原始 HTML 而不会转义。但是您需要考虑安全隐患 - github.com/globaldev/angular-emoji-filter/issues/7
非常感谢，通过使用这个过滤器 angular-smilies link 采取了一种稍微不同的方法，由于我也在使用 Express JS，所以我没有提供模块文件，它现在可以工作了。再次感谢！

【解决方案2】：

编辑以反映 Sergio 的 cmets

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 中，它显示了一个漂亮的表情符号微笑。

【讨论】：

【解决方案3】：

查看他们的文档，它非常简单，没有任何问题（如果你设法正确安装了它）

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

【讨论】：