在 AngularJS 中，指令是一种非常强大的功能，它可以扩展 HTML 标记，让我们可以自定义 HTML 元素和属性。当我们定义一个指令时，我们需要定义一些关键的部分，包括控制器、链接和编译函数。
控制器
控制器是指令中最基本的部分之一。它用来处理指令所需的业务逻辑，并将其绑定到作用域上。控制器通常会有一个名为 $scope 的参数，这个参数对应着指令所在元素的作用域对象。
下面是一个简单的示例，其中指令 myDirective 定义了一个控制器：
---- -------------------
--------
----------------------- ---
------------------------- ---------- -
------ -
----------- ---------------- -
-------------- - ------- --------
-
--
---
---------在这个示例中，我们定义了一个控制器并将其绑定到作用域上，然后可以在模板中使用 {{message}} 来显示它的值。
链接
链接是指令中的另一个重要部分，用于操作指令所在元素的 DOM。链接函数有四个参数：$scope、$element、$attrs 和 controller。其中 $element 是表示指令所在元素的 jQuery 对象，而 $attrs 则是包含了指令所在元素的所有属性的对象。
下面是一个简单的示例，其中我们将一个链接函数添加到了指令中：
---- -------------------
--------
----------------------- ---
------------------------- ---------- -
------ -
----- ---------------- --------- ------- -
--------------------- ---------
-
--
---
---------在这个示例中，我们定义了一个链接函数并使用 $element 将 Hello, world! 文本添加到了指令所在元素中。
编译函数
编译函数是指令中最高级别的部分，它用于将 HTML 模板转换成 DOM 元素。编译函数有三个参数：$element、$attrs 和 transcludeFn。
下面是一个简单的示例，其中我们将一个编译函数添加到了指令中：
---- -------------------
--------
----------------------- ---
------------------------- ---------- -
------ -
-------- ------------------ ------- -
------------------------- --------------
-
--
---
---------在这个示例中，我们定义了一个编译函数并使用 $element 将 Hello, world! 文本添加到了指令所在元素中。
总结
控制器、链接和编译函数是 AngularJS 指令中的三个重要部分。控制器用于处理指令所需的业务逻辑，链接用于操作指令所在元素的 DOM，而编译函数则用于将 HTML 模板转换成 DOM 元素。
虽然它们有各自的作用，但是它们之间也有很多交叉点。例如，控制器可以使用 $element 对象来访问其所在元素的 DOM，而链接函数中也可以定义一个控制器，并通过 controller 属性来绑定到作用域上。
在开发 AngularJS 应用时，了解这些概念和它们之间的区别非常重要。通过灵活地利用这些功能，我们可以创建出更加强大和高效的指令，
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8321