angularjs：在 textarea 中@提及答案

【问题标题】：angularjs : @mention in textareaangularjs：在 textarea 中@提及
【发布时间】：2014-10-09 04:09:28
【问题描述】：

我想在我的 textarea 中显示一个由单词 @ 触发的自动完成表单，例如这个库 http://ichord.github.io/At.js/，但只使用 angularjs 和 css

我应该写什么样的指令？另外，有没有办法用 angular bootstrap UI typehead 指令来实现这个？

【问题讨论】：

【解决方案1】：

请参阅 https://github.com/jeff-collins/ment.io 以获取可能满足您要求的指令。

【讨论】：

@BobbyShark 我用过。将弹出模板添加到页面中文本区域（输入）的数量中，在我的情况下，单个页面上超过 100 个。即使路线发生变化，菜单也会保留在页面中！不是一个好主意。
@alihaghighatkhah 谢谢我会试一试。到目前为止，我使用了 ment.io，并且不得不根据我的需要对其进行一些调整。我会给你关于你的项目的反馈
@BobbyShark 谢谢鲍比，我等着

【解决方案2】：

我编写了angular-otobox，这是一个无依赖性的角度指令，用于在文本中提及、标记和突出显示单词，它很容易使用。看看，很容易使用。

【讨论】：

欢迎，如有问题欢迎随时提问
@alihaghighatkhah 我正在尝试使用你的项目，但我无法让它工作。你有一个示例页面来查看如何正确设置它吗？我将<script src="../../js/otobox.js"></script><script src="../../js/angular-otobox.js"></script> 与css 一起使用，并在角度模块配置中添加了angular-otobox
@BobbyShark 加上这些，您需要将 angular-otobox 添加到您的应用程序的依赖项中，还需要添加 otoboxConfig 指令，其中包含您的激活器的设置。像这些一样尝试，我会尽快尝试创建一个 codepen
@alihaghighatkhah -- 缺少示例代码使得这很难理解，仅供参考。也许创建一个（工作的）Plunkr？ Codepen 无法在 Chrome 中运行。
@alihaghighatkhah 有个演示就好了

【解决方案3】：

AngularJs 已经过时了。请参阅以下 Angular 2+ 版本的依赖项：

【讨论】：

【解决方案4】：

我为我的需要编写了一个脚本（不是 AngularJS），但也可能有助于实现你正在寻找的东西。

HTML：

<div id="wrapper">
    <div id="input-box" contenteditable="true"></div>
    <div id="mention-select-choices" class="hidden"></div>
</div>

要查看 JS 部分，请访问 JSFiddle 链接： https://jsfiddle.net/hsjqzkt3/6/

该脚本支持预定义的名称列表、自动完成、自定义样式、特殊字符等等。

此外，如果需要，可以轻松转换为 AngularJS。

【讨论】：