介绍
angular-ui-mention 是一个针对 AngularJS 开发的支持 @ 标记的一个强大 UI 组件。它可以帮助我们快速的搭建一个支持 @ 进行用户提及的输入框界面，非常适用于社交网络、博客、评论等场景。
安装
angular-ui-mention 可以通过 npm 安装，使用以下命令进行安装：
--- ------- ------------------ ------
另外，还需要在 HTML 中引入以下文件：
----- ---------------- ---------------------------------------------------------------- ------- -----------------------------------------------------------------------
使用
1. 引入依赖
在 AngularJS 应用中，需要在模块中引入 angular-mentions：
----------------------- ----------------
2. 添加输入框
在 HTML 页面中添加一个输入框和保存按钮：
------ ----------- ------------------ ------- --------------------- -------------------- ------- -------------------------------
mention：添加这个指令表示这个输入框使用了angular-ui-mention。mention-items：将要被标记的项，如用户、项目等等。mention-trigger：触发标记的字符，默认为@。
3. 定义被标记的项
在控制器里面定义被标记的项，如下面这个例子定义了一个数组 users：
-------------------------- ---------------- -
------------ - -
- --- -- ----- ------ --
- --- -- ----- ------- --
- --- -- ----- ------ --
- --- -- ----- ------ --
--
----------- - ---------- -
----------------------------
--
---4. 定义标记项点击事件
我们还可以定义标记项的点击事件，当鼠标点击到某个被标记项的时候，我们可以执行一些点击事件的操作。
------ ----------- ------------------ ------- --------------------- -------------------- ------- ------------------------------- ------- ----------------------- --------------------------- ----- --------------------------------------- ---------
这里我们还定义了一个模板 myCustomTemplate.html，它用于渲染被标记项的界面。
-------------------------- ---------------- -
------------ - -
- --- -- ----- ------ --
- --- -- ----- ------- --
- --- -- ----- ------ --
- --- -- ----- ------ --
--
--------------------- - -------------- ----- -
--------------- - - --- ------------
--
---5. 在标记项上使用自定义样式
对于标记项的界面我们可以使用自定义样式，如下面这个例子定义了一个 mention 类，来安排被标记项的样式。
-------- - ----------------- -------- ------ -------- -------- ---- -
示例代码
--------- -----
------
------
----- ----------------
-------------- ------- ---------------
----- ---------------- ----------------------------------------------------------------
------- ------------------------------------------------------------------------------------
------- -----------------------------------------------------------------------
-------
-------- -
----------------- --------
------ --------
-------- ----
-
--------
-------
----- -------------- -----------------------
----------- ------- ------------
------ ----------- ------------------ ------- --------------------- -------------------
--------------------------------------
------- -------------------------------
------- ----------------------- ---------------------------
----- ---------------------------------------
---------
--------
--- ----- - ----------------------- ----------------
-------------------------- ---------------- -
------------ - -
- --- -- ----- ------ --
- --- -- ----- ------- --
- --- -- ----- ------ --
- --- -- ----- ------ --
--
--------------------- - -------------- ----- -
--------------- - - --- ------------
--
----------- - ---------- -
----------------------------
--
---
---------
-------
-------总结
angular-ui-mention 是一款非常强大的 UI 组件，可以帮助我们快速的搭建一个支持 @ 提到功能的输入框界面。本文章介绍了它的使用方法和相关设置，希望可以对大家在项目开发中有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671cd30d09270238228e0