在 Angularjs 中，指令是一种非常强大的工具，它让我们可以用一种独立于 HTML 的方式来定义自己的标签或属性，从而扩展 HTML 的能力。这个特性在进行复杂的前端开发时非常有用，本文将介绍 Angularjs 中的自定义指令及其生命周期。
自定义指令
Angularjs 中有很多内置指令，比如 ng-if, ng-repeat, ng-click 等等。但是，有时候内置指令还是满足不了我们的需求。这时，我们可以通过自定义指令来实现。
定义自定义指令的方式有两种，一种是通过 restrict 属性来定义指令的作用方式，一种是通过 template 来定义指令所代表的 HTML。
通过 restrict 属性来定义指令的作用方式
restrict 属性可以定义自定义指令作用的方式，有以下四种取值：
'A': 只能通过属性名来调用指令，如<div my-directive></div>'E': 只能通过标签名来调用指令，如<my-directive></my-directive>'C': 只能通过类名来调用指令，如<div class="my-directive"></div>'M': 只能通过注释来调用指令，如<!--directive:my-directive-->
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- --------- ------------
-------
----- -----------------
------- ------------------------------------------------------------------------------------
---- --------------------------- -- ------
------ ----------- ----------- ----------------------- --
-- --------------------- --- ---------- ----- -------------
------
--------
--- --- - ------------------------- ----
------------------------------ ---------- -
------------ - ---
---
--------------------------- ---------- -
------ -
--------- ----
-------- ----------
----- --------------- -------- ----- ----- -
--------------------------- - -------------------- ---------- -
--- ----- - ---------- -- ----------
------ ----- -- ---- -- ----- --- ---
--
-
--
---
---------
-------
-------通过 template 来定义指令所代表的 HTML
如果我们想要指定指令所代表的 HTML，我们可以使用 template 选项。template 可以是一个字符串，也可以是一个函数。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- --------- ------------
-------
----- -----------------
------- ------------------------------------------------------------------------------------
---- --------------------------- -- ------
--------- ------------------------------
------
--------
--- --- - ------------------------- ----
------------------------------ ---------- -
------------ - ------ -------
---
------------------------ ---------- -
------ -
--------- ----
------ -
---- ---
--
--------- ----- ------------ ------------- ------------ -- --------------------
--
---
---------
-------
-------生命周期
每个指令都有一个生命周期。生命周期是指令在 Angularjs 运行时的各种状态和变化，比如编译和链接。
下面是指令生命周期的各个阶段:
compile: 编译阶段，指令的 HTML 被 Angularjs 编译到一个函数中。preLink: 链接前阶段，指令连接到 DOM 前运行的函数。postLink: 链接后阶段，指令连接到 DOM 后运行的函数。controller: 控制器阶段，指令控制器与控制器函数在此阶段初始化。link: 链接阶段，链接前和链接后的阶段合并。
指令的生命周期方法分别是：
compile: 运行一次，返回一个 postLink 函数。preLink: 运行一次，链接前初始化。postLink: 运行一次，链接后初始化。controller: 运行一次，指令控制器初始化。
下面是它们的详细说明：
compile
compile 函数在编译阶段运行，返回的是一个 postLink 函数。通常情况下，我们在编译阶段设置或处理一些需要在链接阶段使用的数据或 DOM。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- --------- ------------
-------
----- -----------------
------- ------------------------------------------------------------------------------------
---- --------------------------- -- ------
--------- ------------------ ------------------------- ------------------------
----------------
-----------
------
--------
--- --- - ------------------------- ----
------------------------------ ---------- -
---------- - --- -------
------------ - ------ -------
--------------- - ---------- -
------------------ -- ----------
--
-------------- - ---------- -
------------------ -- ----------
--
---
------------------------ ---------- -
------ -
--------- ----
----------- -----
------ -
------ ----
------ ----
----- ---
--
--------- ----- ------------ ------- -
----- ---------------------- -
----- ----------------------- -
----- ---------------------- -
-------------------- -
-------- ------------- ------------- -------------------- ------------------------------------ -
-------- -
----- -------------------- -
--------------------------------- -
-------- -
-------- -
-------- -
---------
-------- ------------------ ------- -
-----------------------
------ -------- --------------- --------- ------- -
------------------------
--
-
--
---
---------
-------
-------preLink
preLink 函数在链接前阶段运行，主要用于进行一些 DOM 操作。它可以访问指令的属性和 DOM 等元素。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- --------- ------------
-------
----- -----------------
------- ------------------------------------------------------------------------------------
---- --------------------------- -- ------
--------- ------------------ ------------------------- ------------------------
------ ----------- ------------------- ----- ----------- ----------------------- --
----------------
-----------
------
--------
--- --- - ------------------------- ----
------------------------------ ---------- -
---------- - --- -------
------------ - ------ -------
--------------- - ---------- -
------------------ -- ----------
--
-------------- - ---------- -
------------------ -- ----------
--
---
------------------------ ---------- -
------ -
--------- ----
----------- -----
------ -
------ ----
------ ----
----- ---
--
--------- ----- ------------ ------- -
----- ---------------------- -
----- ----------------------- -
----- ---------------------- -
-------------------- -
-------- ------------- ------------- -------------------- ------------------------------------ -
-------- -
----- -------------------- -
--------------------------------- -
-------- -
-------- -
-------- -
---------
-------- ------------------ ------- -
-----------------------
------ -------- --------------- --------- ------- -
------------------------
--
--
----- --------------- -------- ------ -
-----------------------
-
--
---
-------------------------- ---------- -
------ -
--------- ----
----- --------------- -------- ------ -
--- ------- - -------------------------------
---------------------- - -----------
-------------------- - ---- ----- ------
------------------------ - -------
--------------------- - ---- ------
------------------- ----------- -
----------------- - ----------------
------------------ - --------------------- - ---------------------- - -----
----------------- - -------------------- - -----
-----------------------------------
---
------------------ ----------- -
-----------------------------------
---
-
--
---
---------
-------
-------postLink
postLink 函数在链接后阶段运行，主要用于进行事件绑定等操作。它可以访问指令的属性和 DOM 等元素。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- --------- ------------
-------
----- -----------------
------- ------------------------------------------------------------------------------------
---- --------------------------- -- ------
--------- ------------------ ------------------------- ------------------------
----------------
-----------
------- ---------------------------------- ----------------
------
--------
--- --- - ------------------------- ----
------------------------------ ---------- -
---------- - --- -------
------------ - ------ -------
--------------- - ---------- -
------------------ -- ----------
--
-------------- - ---------- -
------------------ -- ----------
--
---------------- - ---------- -
--------------------------
--
---
------------------------ ---------- -
------ -
--------- ----
----------- -----
------ -
------ ----
------ ----
----- ---
--
--------- ----- ------------ ------- -
----- ---------------------- -
----- ----------------------- -
----- ---------------------- -
-------------------- -
-------- ------------- ------------- -------------------- ------------------------------------ -
-------- -
----- -------------------- -
--------------------------------- -
-------- -
-------- -
-------- -
---------
-------- ------------------ ------- -
-----------------------
------ -------- --------------- --------- ------- -
------------------------
----------------
--------- -----
----- -----
---------------------- ----------- -
-------------
------------------------ ----------- -
--------------
---
--
--
----- --------------- -------- ------ -
-----------------------
-
--
---
---------
-------
-------controller
controller 函数与指令控制器相关，在链接前和链接后阶段之间的控制器阶段运行。它的作用是为指令提供与外部世界交互的方式，主要用于控制器的初始化。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- --------- ------------
-------
----- -----------------
------- ------------------------------------------------------------------------------------
---- --------------------------- -- ------
-----------------------------
------
--------
--- --- - ------------------------- ----
------------------------------ ---------- -
------------ - ------ -------
---
---------------------------- ---------- -
------ -
--------- ----
----------- ---------------- --------- ------- -
--------------------------
-------------- - ---------- -
------------------------
--
--
----- --------------- -------- ------ -
--------------------
------------------- ---------------
--
--------- ------------------------------
--
---
---------
-------
-------总结
通过本文介绍，我们了解了 Angularjs 中的自定义指令及其生命周期。自定义指令不仅可以让我们更好地掌控 HTML，还可以提供强大的功能和定制化的特性。在开发复杂的前端应用时，指令的作用越发显得重要，掌握指令的使用方法和生命周期对于成为一名优秀的前端工程师非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6451cfe0675af4061b5903eb