AngularJS 是一个流行的前端框架，它通过指令将视图和逻辑分离，提高了前端开发的效率和可维护性。在 AngularJS 中，自定义指令能够让你扩展 HTML 的功能，从而实现更好的重用性和可维护性。
本文将介绍 AngularJS 中自定义指令的开发实践，包括指令的基本概念、如何创建指令，以及一些实用的指令示例。
自定义指令概述
指令是 AngularJS 中一个非常重要的概念，它用来扩展 HTML。指令可以在 HTML 中添加自定义标记、属性或样式，并且可以添加相应的逻辑控制。
在 AngularJS 中，指令是通过定义一个 JavaScript 对象来实现的，这个对象包含指令的名称、返回的指令定义函数以及其他可选参数。指令定义函数中的代码将在页面上渲染指令时执行。
下面是一个简单的指令定义示例：
-- -------------------- ---- -------
------------------------------------------------ ---------- -
------ -
--------- ----
--------- --------------------
----- --------------- -------- ------ -
---------------------
-
--
---这个指令定义了一个名为 myDirective 的指令，它是一个元素指令（restrict: 'E'），并且在渲染时使用了一个简单的 HTML 模板。指令定义函数中还包括一个 link 函数，我们会在后面的示例中介绍它的用途。
指令的属性绑定
在定义指令时，经常需要通过属性绑定向指令传递参数。AngularJS 中支持多种方式的属性绑定，包括双向绑定、单向绑定和事件绑定。
双向绑定
使用双向绑定可以让指令中的属性和父级作用域中的属性相互联动。在指令定义函数中，可以通过 scope 参数来定义指令的作用域，然后在指令中使用双大括号语法来引用作用域中的属性。
下面是一个双向绑定示例：
-- -------------------- ---- -------
------------------------------------------------ ---------- -
------ -
--------- ----
------ -
----- ---
--
--------- ----------- ---------------
--
---这个指令定义了一个名为 myDirective 的元素指令，它通过 scope 参数来定义了一个名为 name 的属性，属性的值通过双向绑定和父级作用域中的 name 属性关联。在指令中使用双大括号语法来显示属性值。
父级作用域中的 name 属性可以通过这种方式来传递：
<my-directive name="myName"></my-directive>
单向绑定
通过单向绑定可以将父级作用域中的数据传递到指令中，但是指令中对数据的修改不会影响到父级作用域中的数据。
在指令定义函数中，可以通过 scope 参数来定义指令的作用域，并通过 @ 符号来绑定属性。
下面是一个单向绑定示例：
-- -------------------- ---- -------
------------------------------------------------ ---------- -
------ -
--------- ----
------ -
----- ---
--
--------- ----------- ---------------
--
---这个指令定义了一个名为 myDirective 的元素指令，它通过 scope 参数来定义了一个名为 name 的属性，属性的值通过单向绑定和父级作用域中的 myName 属性关联。在指令中使用双大括号语法来显示属性值。
父级作用域中的 myName 属性可以通过这种方式来传递：
<my-directive name="myName"></my-directive>
事件绑定
使用事件绑定可以在指令中触发事件，然后通知父级作用域中的事件处理函数执行。
在指令定义函数中，可以通过 scope 参数来定义指令的作用域，并通过 & 符号来绑定事件。
下面是一个事件绑定示例：
-- -------------------- ---- -------
------------------------------------------------ ---------- -
------ -
--------- ----
------ -
-------- ---
--
--------- -------- ------------------------------------
----- --------------- -------- ------ -
-------------- - ---------- -
----------------
--
-
--
---这个指令定义了一个名为 myDirective 的元素指令，它通过 scope 参数来定义了一个名为 onHello 的事件，事件的处理函数可以通过父级作用域中的一个函数来传递。
在指令中使用 ng-click 指令来绑定 sayHello() 函数，在 sayHello() 函数中调用 scope.onHello() 方法来触发事件。
父级作用域中可以这样来定义事件处理函数：
<my-directive on-hello="handleHello()"></my-directive>
实用的指令示例
下面我将介绍一些常用的指令示例，它们可以方便地扩展 HTML 的功能并提高前端开发的效率和可维护性。
ngShow 和 ngHide 指令
ngShow 和 ngHide 指令分别用于控制元素的显示和隐藏。
-- -------------------- ---- -------
------------------------------------------- ---------- -
------ --------------- -------- ------ -
-------------------------- --------------- -
---------------------- ----- - -- - --------
---
--
---
------------------------------------------- ---------- -
------ --------------- -------- ------ -
-------------------------- --------------- -
---------------------- ----- - ------ - ----
---
--
---这两个指令通过 $watch 函数来监测 ng-show 和 ng-hide 属性的变化，然后设置元素的 display 样式来控制元素的显示和隐藏。
ngModel 指令
ngModel 指令用于绑定表单元素和作用域中的变量，使它们保持同步。这个指令需要和 $parse、$rootScope、$exceptionHandler 三个 AngularJS 服务一起使用。
-- -------------------- ---- -------
-------------------------------------------- ---------- ------------- -------------------- ---------------- ----------- ------------------ -
------ -
--------- ----
-------- -----------
----- --------------- -------- ------ -------- -
-- ---------- -------
--- ------ - ----------------------
------ - --------------
------
-------- ------------- -
--- -
----- - -------------------
------------- -------
- ----- --- -
---------------------
-
-
--------------- - ---------- -
----- - --------------
-----------------------------
----------------- -- ----
--
--------------------------- ------------------ --------- -
-- --------- --- --------- -
--------------
--------------------------------------- -
----- --------------
------ -------------------
---
-
---
------------------- ---------- -
----------------------- -
----- - --------------
-----------------------------
---
---
-------------------- ---------- -
--------------------------
---
-
--
----这个指令定义了一个名为 ngModel 的属性指令，它需要和元素上的 ng-model 属性一起使用。在指令中使用 $parse 服务来解析 ngModel 属性，然后使用 $rootScope 和 $exceptionHandler 服务进行错误处理。
在指令的 link 函数中，我们可以使用 ngModel.$viewValue 和 ngModel.$modelValue 两个属性来访问此时表单元素的值和作用域中的变量值，通过它们我们可以实现表单元素和绑定变量的同步更新。
ngRepeat 指令
ngRepeat 指令用于在 HTML 中重复一个元素的内容，使得可以方便地从作用域中遍历集合并动态生成 HTML。
-- -------------------- ---- -------
--------------------------------------------- ---------- -
------ -
--------- ----
--------- -----
-------- ----------------- ------ -
--- -------- - ---------------
----- - ----------------------------------------------------------------------
------ - ---------
------ - ---------
----------- - ---------
----------- - --------------
---------- - ---------------
------- - ------------- - ------ ---- --
------ - ------------- - ------ ---- --
--------
-- ------------- -
------- - ------------- -
------ -------------------------
--
-
-- ------------ -
------ - ------------- -
------ ------------------------
--
-
------- - --------------- -
--- ----------- - ----------------------
------- - ----------- - ------------------- - ------------- - ------ ---- --
-------- - --------------------
------- - ------------------
----------- - ---
--------- - ---
------------------------ ------------- ---- -
--- -- - ------------ -----
------------- - ----
---------------------
---
--------------------------------- -
------ ----------------------------- -
------ -------------
---
-- ------------------- ---------- -
-------------------------- ------------ -
-- ---------------------- --- --- -
--- --- - --------------
------ --------------
------------------------------------------- ---
-
---
-------------------------- ------------ ---- -
-- ------------------------------- -
----------------------- -- ----
------------- - -------------------------------
-
---
---
------ ------------
--
------ --------------- -------- ------ -
--- ------------
------------------------------- ------------------ -
--- ---- -----------
--- ---- -- ------------ -
---------- - -------------
------------------ - ----------------------------
------------------------------------------- -
------ -----------------------------------------
----
-
----------- - ---------
---
--
-
--
---这个指令定义了一个名为 ngRepeat 的属性指令，它需要和元素上的 ng-repeat 属性一起使用。在指令中使用 $parse 服务来解析 ng-repeat 属性，并使用 $compile 服务来动态生成 HTML。
指令中定义了一个 watchFn 函数，它用于监听作用域中集合的变化，并返回排序、过滤以及跟踪 ng-repeat 匹配项的 ID 等信息。
在指令中使用 $watchCollection 函数来监听 watchFn 的返回值，并在值发生变化时执行对应的 DOM 操作。
总结
AngularJS 自定义指令是一项非常重要的技术，它可以加强 AngularJS 的功能并提升前端开发效率和可维护性。在实践过程中，我们需要了解指令的基本概念、如何创建指令以及如何使用指令传递参数和触发事件。
本文中我们介绍了 AngularJS 中常用的指令示例，包括 ngShow 和 ngHide 指令、ngModel 指令以及 ngRepeat 指令。希望这些示例能够帮助你更好地了解 AngularJS 自定义指令的实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e91dabf6b2d6eab3484d8c