13、AngularJS 指令：功能与使用详解

AngularJS 指令：功能与使用详解

1. 指令简介

在众多 JavaScript 框架中，AngularJS 的独特之处无疑在于其指令（Directives）。指令采用声明式方法，能为 HTML 增添新功能，这一特性极具吸引力。一方面，它外观简洁、语法直观；另一方面，它为客户端 Web 开发带来了乐趣与便捷。

在 AngularJS 里，指令本质上是 JavaScript 函数，当 AngularJS 框架编译文档对象模型（DOM）时会调用这些函数。虽然“编译”这个词听起来有些复杂，但其实它只是 AngularJS 用于将指令与 HTML 元素关联的内部机制。

凭借这一强大概念，AngularJS 允许开发者创建全新的指令，用于封装逻辑、简化 DOM 操作，甚至能为 HTML 赋予全新的行为。指令的应用范围极为广泛，从简单的静态内容复用块，到具备网络和数据库连接功能的复杂客户端用户界面，无所不能。内置指令提供了基本的功能，而自定义指令则能让开发者进一步拓展应用的功能。

2. 指令的基本形式

指令可以有多种不同的形式，以 ngController 指令为例：
- 作为属性 ：这是最常见的使用方式，例如 <div ng-controller="myFilterDemoCtrl"></div> 。不过，这种方式可能导致文档不符合 HTML5 规范。为解决这一问题，可以使用 data: 前缀，如 <div data:ng-controller="myFilte