在Angular.js中，自定义指令是非常重要的概念之一。通过自定义指令，我们可以扩展HTML标签，创造出符合自己需要的模块和组件。本文将介绍Angular.js自定义指令的基本知识点和一些实例，希望对前端开发者有所帮助。
基本知识点
指令定义
Angular.js中定义指令的方式是通过调用directive()方法。该方法接受两个参数：指令名称和指令函数，如下所示：
angular.module('app', [])
.directive('myDirective', function() {
// 指令函数
});上面代码中，myDirective为指令名称，指令函数则是一段JavaScript代码，用于定义指令的行为。
指令选项
指令函数可以有多个选项，用于控制指令的行为。以下是一些常用的选项：
restrict：指令使用的方式，可选值为'E'、'A'、'C'和'M'，分别表示元素名、属性、类名和注释。scope：指定指令的作用域，可选值为true、false和一个对象。template：指定指令的模板。link：指定指令的链接函数。
模板
Angular.js中的模板是一段HTML代码，可以用于定义指令生成的DOM结构。以下是一个简单的例子：
angular.module('app', [])
.directive('myDirective', function() {
return {
restrict: 'E',
template: '<div>Hello, world!</div>'
};
});上面代码中，myDirective指令生成的DOM结构为<div>Hello, world!</div>。
作用域
Angular.js中每个指令都有自己的作用域。默认情况下，指令继承其父作用域的属性和方法。如果需要指定指令独立的作用域，可以在指令选项中设置scope选项值为true或者一个对象。
-- -------------------- ---- -------
--------------------- ---
------------------------- ---------- -
------ -
--------- ----
------ -----
--------- -------------------------
----- --------------- -
------------- - ------- --------
-
--
---上面代码中，指令独立的作用域包含了一个message属性，指令模板中使用了该属性。
链接函数
链接函数是指令函数中的一个选项，用于在指令生成DOM结构后进行一些操作，比如添加事件监听器、修改DOM结构等等。链接函数的参数依次为作用域、DOM元素、属性和控制器。
-- -------------------- ---- -------
--------------------- ---
------------------------- ---------- -
------ -
--------- ----
------ -----
--------- ------------ --------------
----- --------------- -------- -
------------------- ---------- -
-----------------------
---
-
--
---上面代码中，链接函数为指令生成的DOM元素添加了一个click事件监听器。
实例
简单示例
以下是一个简单的自定义指令示例：
angular.module('app', [])
.directive('myDirective', function() {
return {
restrict: 'E',
template: '<div>Hello, world!</div>'
};
});上面代码中，myDirective指令生成的DOM结构为<div>Hello, world!</div>。
指定作用域
以下是一个指定作用域的自定义指令示例：
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/1753) ，转载请注明来源 [https://www.javascriptcn.com/post/1753](https://www.javascriptcn.com/post/1753)