如何在带有指令的angularjs中使用表情符号选择器库？答案

【问题标题】：how to use emoji picker lib in angularjs with directive?如何在带有指令的angularjs中使用表情符号选择器库？
【发布时间】：2016-05-24 03:56:55
【问题描述】：

我得到了这个表情符号库：

https://github.com/one-signal/emoji-picker

我正在考虑做一个指令，这是使用表情符号选择器的功能：

$(function() {
  // Initializes and creates emoji set from sprite sheet
  window.emojiPicker = new EmojiPicker({
    emojiable_selector: '[data-emojiable=true]',
    assetsPath: 'lib/img/',
    popupButtonClasses: 'fa fa-smile-o'
  });
  // Finds all elements with `emojiable_selector` and converts them to rich emoji input fields
  // You may want to delay this step if you have dynamically created input fields that appear later in the loading process
  // It can be called as many times as necessary; previously converted input fields will not be converted again
  window.emojiPicker.discover();
});

这是表情符号的 htlm 使用：

  <p class="lead emoji-picker-container">
    <textarea class="form-control textarea-control" rows="3" placeholder="Textarea with emoji Unicode input" data-emojiable="true" data-emoji-input="unicode"></textarea>
  </p>

我怎样才能为我的 Angular 项目做到这一点？谢谢你帮助我！

【问题讨论】：

你可能想看看以前的工作并从那里开始，通常 SO 更适用于你遇到的直接技术问题或特定问题github.com/one-signal/emoji-picker 这个表情符号选择器是在不依赖 jQuery 的情况下编写的，所以你可以避免这种额外的依赖。如果您坚持使用此库并将其包装在指令中，则需要在 Angular 之前加载 jQuery，但可能会发现其他 Angular 表情符号库有助于找到组织指令代码的起点。

标签： javascript jquery angularjs angularjs-directive

【解决方案1】：

ng-emoji-picker 是https://github.com/OneSignal/emoji-picker 的角度指令

它删除了Original Emoji Picker 使用的所见即所得编辑器，该编辑器将您的输入/文本区域转换为 div，而只是在当前文本框或输入上添加表情符号选择器图标，并使用 unicode 添加表情符号

【讨论】：

【解决方案2】：

如果有人正在寻找 Angular 2 的表情符号选择器，经过两天的搜索，我发现了这个非常有用的 jQuery 插件： EmojiOne Area

如果你想调用是在你的组件中声明一个全局变量（你想在哪里使用它）像declare const jQuery: any 然后确保在ngAfterViewInit() 中使用它。 ngAfterViewInit() 将确保您的 DOM 已准备就绪，否则您将收到一条错误消息，指出 emojioneArea 不是函数。

通过按 id 或类选择输入元素来使用它：
jQuery(".your-input-selector").emojioneArea();

【讨论】：

【解决方案3】：

您也可以将其用于带角度的 EmojiOne 区域

// Document ready
angular.element(document).ready(function () {
}

我遇到的唯一问题是，当将它与 <md-input-container> 中的文本区域一起使用时，它会破坏行为以及与模型接缝的链接被破坏。选择器也显示在我的其他元素下。我还没有尝试过 ng-emoji-picker。

【讨论】：

【解决方案4】：

表情符号选择器适用于角度也很容易使用。

使用 webpack 导入库

import 'angular-emoji-picker-extended/dist/js/emoji-picker';

在视图中

<span container-id="txtPostMessage"  emoji-picker="post.message" output-format="unicode" placement="right-relative" title="Emoji"></span>

确保在控制器中初始化模型，瞧！

【讨论】：