简介
在前端开发中，经常需要实现表格、文本框等可以被用户直接编辑的元素。这个过程中，往往需要自己使用原生的 JavaScript 去实现一些列的事件监听和样式修改。很多时候，我们希望能够通过一些快速的拖拽，唤醒一个可编辑的组件。这个时候，我们可以考虑使用 npm 包 angular-inline-editors-2。
angular-inline-editors-2 是一个 AngularJS 组件库。它提供了一系列的内置编辑器，包括简单的文本框、下拉菜单、复选框等等。你可以轻松地将它们与你的数据模型绑定，并且可以进行各种自定义的样式和事件处理。
在学习本教程之前，需要先安装 AngularJS 和 angular-inline-editors-2。
基本使用
首先，我们需要在 HTML 中引入 AngularJS 库和 angular-inline-editors-2 库。
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> <script src="https://cdn.jsdelivr.net/angular.inline.editors/2.0.0/dist/angular-inline-editors.js"></script>
接着，在应用的模块中，需要注入‘angularInlineEditors’来开启该组件库。代码片段如下：
angular.module('myApp', ['angularInlineEditors'])现在我们来尝试使用 angular-inline-editors-2 来实现一个简单的可编辑列表。
HTML 代码如下：
-- -------------------- ---- -------
------ ------------ -------------- ------------ -------------------------------
-------
----
-----------
-------------
------------
------------
-----
--------
-------
--- --------------- -- ----------
--------------------
------------------ ------------------------------- ---------------------- ----------------------------------------------
------------------ ------------------------------ ---------------------- ---------------------------------------------
------------------ ------------------------------ ------------------ ------------------------ ---------------------------------------------
-----
--------
--------这段代码定义了一个表格，其中三列是可编辑的。我们通过 ng-repeat 指令来循环显示我们的数据项，同时把每个数据项传递给了三个 inline-editor 组件。
接下来，我们来看看与 edit-inline-editor 相关的控制器。它负责初始化列表，以及接收 inline-editor 组件的回调事件，把编辑过的数据保存到后端。
-- -------------------- ---- -------
-------------------------------- ---------------- -------
--------------- - -
-
--- --
----- -----
---- ---
---- ---
--
-
--- --
----- -----
---- ---
---- ---
-
-----
--
-------------- - -
----
---
--
--------------- - -------------- -------
----------------------------
--- --------
------ ------
------ -----------
-------------------------
-----------------
-----------------------
-------------------
---
-
---控制器初始化了 listData 数组，并把 sexList 数组作为下拉菜单的选项传递给了 inline-editor 组件。$scope.saveData 方法接收到 inline-editor 的 on-save 事件后，把变更的数据通过 $http.post 方法保存到了后端。
现在，我们已经可以在页面上看到一个可编辑的表格了。
高级使用
在基于 angular-inline-editors-2 开发的实际应用中，我们还可以使用更多的内置编辑器，以及进行更多的自定义。
嵌套输入框
在实际应用中，我们可能需要将一个内嵌的数组中的值也绑定到一个 inline-editor 组件中。这个时候，我们可以使用 nested-editor 组件。下面是一个使用 nested-editor 实现嵌套输入框的例子：
HTML 代码：
-- -------------------- ---- -------
------ ------------ -------------- ------------ -------------------------------
-------
----
-----------
-------------
------------
------------
----------------
-----
--------
-------
--- --------------- -- ----------
--------------------
------------------ ------------------------------- ---------------------- ----------------------------------------------
------------------ ------------------------------ ---------------------- ---------------------------------------------
------------------ ------------------------------ ------------------ ------------------------ ---------------------------------------------
------------------ ---------------------------------- ---------------------------------------------
-----
--------
--------控制器代码：
-- -------------------- ---- -------
-------------------------------- -------- -------- ------ -
--------------- - -
-
--- --
----- -----
---- ---
---- ----
-------- -
-
------- ------
------- ----
--
-
------- ------
------- ----
-
-
--
-
--- --
----- -----
---- ---
---- ----
-------- -
-
------- ------
------- ----
--
-
------- ------
------- ----
-
-
--
-----
--
-------------- - -
----
---
--
--------------- - -------------- -------
----------------------------
--- --------
------ ------
------ -----------
-------------------------
-----------------
-----------------------
-------------------
---
--
---
自定义样式
angular-inline-editors-2 的编辑器内置了一些样式，但是如果我们需要对样式进行更加细致的控制，那么我们可以通过自定义样式类的方式来实现。
我们可以通过两种方式自定义样式。
- 通过指定源码 SCSS 文件来定制样式。
- 使用选项模板自定义样式。
下面是一些常用的 SCSS 样式变量：
-- -------------------- ---- ------- -- ------- -------------- ----- --------- --------------- ---- --------- ------------------ ---- --------- -------------------- ----- --------- -------------- ---- --------- ----------------- ---- --------- --------------------- ---- --------- -- ------- -------------------- ---- --------- ------------------- --- --------- --------------------- --- --------- ---------------- ---- --------- ----------------------- ------- --------- ---------------------- ---- --------- --------------- --- --- --------- -- -------- ------------------- ---- --------- -------------------- ---- --------- ----------------- ---- --------- -------------- ---- --------- --------------------- ---- --------- ---------------------- --- --------- -- ------- -------------- --- --------- ------------------- ---- --------- --------------------- ------- ---------
接下来，我们可以通过编辑选项模板来自定义组件的 HTML 代码。例如，我们可以使用下面的代码片段重定义下拉菜单的 HTML 结构。
-- -------------------- ---- -------
------- ----------------------- -----------------
---- -----------------------
-------
------------------
----------------- --- ----- -- ---------------
---------
---- ---------------------------
------
---------在定义好模板之后，我们需要把模板文件的 URL 路径告诉组件库。
.config(['inlineEditorConfigProvider', function (inlineEditorConfigProvider) {
// 设置 html 模板文件的路径
inlineEditorConfigProvider.setTemplatePath('/path/to/your/template.html');
}]);自定义编辑器
如果我们需要实现更加特定的编辑器，可以通过扩展 inline-editor 指令、使用自定义模板以及自定义样式来实现。这些操作涉及的内容比较复杂，需要一定的编程基础。在这里，我们只简单介绍一下自定义编辑器的流程和实现方法。
接下来，我们定义一个新的编辑器，它是一个图片选择器。
HTML 代码：
<input type="text" class="form-control img-input" ng-model="editorValue" ng-change="changeValue()"> <button type="button" class="btn btn-default" ng-click="openImagePicker()">选择图片</button>
定义指令：
-- -------------------- ---- -------
-------------------------------------------- -------- -- -
------ -
--------- ----
------ -
-------- ----
------- ----
--------- ----
-------- ---
--
------------ -------------------------
----- -------- ------- ----- ------ -
--- ----------- - ---
----------------------- -------- ------- -
----------- - ------
----------------- - ------
---
----------------- - -------- -- -
-- ------------ --- ------------------ -
----------- - ------------------
-------------- ------ ----------- ---
-
--
--------------------- - -------- -- -
-- ---------
--
-
--
---定义模板：img-editor.html
-- -------------------- ---- -------
---- ------------------ --------------------
------
-----------
------------------- ----------
----------------------
--------------------------
-------
-------------
---------- ------------
-----------------------------
----
---------
------接下来，我们就可以像使用内置编辑器一样来使用它了，例如：
<td><img-editor on-save="saveData(item,'avatar')" ng-model="item.avatar"></img-editor></td>
总结
在本篇文章中，我们介绍了 npm 包 angular-inline-editors-2 的使用方法，并介绍了该组件库的基本使用、高级使用和自定义编辑器等内容。通过学习本文，你可以了解如何使用 angular-inline-editors-2 来实现一个可编辑列表，以及如何进行更高级的使用。同时，我们还介绍了如何自定义组件样式和模板，以及如何通过扩展 inline-editor 指令来定义自己的编辑器。希望这些内容对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f0d9381d61a3540d64