介绍
angular-ui-mention 是一个针对 AngularJS 开发的支持 @ 标记的一个强大 UI 组件。它可以帮助我们快速的搭建一个支持 @ 进行用户提及的输入框界面，非常适用于社交网络、博客、评论等场景。
安装
angular-ui-mention 可以通过 npm 安装，使用以下命令进行安装：
npm install angular-ui-mention --save
另外，还需要在 HTML 中引入以下文件：
<link rel="stylesheet" href="bower_components/angular-ui-mention/dist/mention.min.css"> <script src="bower_components/angular-ui-mention/dist/mention.min.js"></script>
使用
1. 引入依赖
在 AngularJS 应用中，需要在模块中引入 angular-mentions：
angular.module('myApp', ['ui.mention']);2. 添加输入框
在 HTML 页面中添加一个输入框和保存按钮：
<input type="text" ng-model="comment" mention mention-items="users" mention-trigger="@"> <button ng-click="save()">Save</button>
mention：添加这个指令表示这个输入框使用了angular-ui-mention。mention-items：将要被标记的项，如用户、项目等等。mention-trigger：触发标记的字符，默认为@。
3. 定义被标记的项
在控制器里面定义被标记的项，如下面这个例子定义了一个数组 users：
-- -------------------- ---- -------
-------------------------- ---------------- -
------------ - -
- --- -- ----- ------ --
- --- -- ----- ------- --
- --- -- ----- ------ --
- --- -- ----- ------ --
--
----------- - ---------- -
----------------------------
--
---4. 定义标记项点击事件
我们还可以定义标记项的点击事件，当鼠标点击到某个被标记项的时候，我们可以执行一些点击事件的操作。
<input type="text" ng-model="comment" mention mention-items="users" mention-trigger="@">
<button ng-click="save()">Save</button>
<script type="text/ng-template" id="myCustomTemplate.html">
<span class="mention">{{mention.name}}</span>
</script>这里我们还定义了一个模板 myCustomTemplate.html，它用于渲染被标记项的界面。
-- -------------------- ---- -------
-------------------------- ---------------- -
------------ - -
- --- -- ----- ------ --
- --- -- ----- ------- --
- --- -- ----- ------ --
- --- -- ----- ------ --
--
--------------------- - -------------- ----- -
--------------- - - --- ------------
--
---5. 在标记项上使用自定义样式
对于标记项的界面我们可以使用自定义样式，如下面这个例子定义了一个 mention 类，来安排被标记项的样式。
.mention {
background-color: #cccccc;
color: #ffffff;
padding: 2px;
}示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------- ---------------
----- ---------------- ----------------------------------------------------------------
------- ------------------------------------------------------------------------------------
------- -----------------------------------------------------------------------
-------
-------- -
----------------- --------
------ --------
-------- ----
-
--------
-------
----- -------------- -----------------------
----------- ------- ------------
------ ----------- ------------------ ------- --------------------- -------------------
--------------------------------------
------- -------------------------------
------- ----------------------- ---------------------------
----- ---------------------------------------
---------
--------
--- ----- - ----------------------- ----------------
-------------------------- ---------------- -
------------ - -
- --- -- ----- ------ --
- --- -- ----- ------- --
- --- -- ----- ------ --
- --- -- ----- ------ --
--
--------------------- - -------------- ----- -
--------------- - - --- ------------
--
----------- - ---------- -
----------------------------
--
---
---------
-------
-------总结
angular-ui-mention 是一款非常强大的 UI 组件，可以帮助我们快速的搭建一个支持 @ 提到功能的输入框界面。本文章介绍了它的使用方法和相关设置，希望可以对大家在项目开发中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671cd30d09270238228e0