Page 92 - AngularJS权威教程

72 第 10 章 指令详解

第10章

指令详解

本章的目标是全面介绍指令的设置选项和功能，以及如何使用指令来打造成熟的客户端应用。

10.1 指令定义

对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素
的功能。

例如，ng-click可以让一个元素能够监听click事件，并在接收到事件的时候执行AngularJS表
达式。正是指令使得AngularJS这个框架变得强大，并且正如所见，我们可以自己创造新的指令。
AngularJS应用的模块中有很多方法可以使用，其中directive()这个方法是用来定义指令的：

angular.module('myApp', [])
.directive('myDirective', function ($timeout, UserDefinedService) {
// 指令定义放在这里
});
directive() 方法可以接受两个参数：

1. name（字符串）
指令的名字，用来在视图中引用特定的指令。

2. factory_function （函数）
这个函数返回一个对象，其中定义了指令的全部行为。 $compile服务利用这个方法返回的对
象，在DOM调用指令时来构造指令的行为。

angular.application('myApp', [])
.directive('myDirective', function() {
// 一个指令定义对象
return {
// 通过设置项来定义指令，在这里进行覆写
};
});
我们也可以返回一个函数代替对象来定义指令，但是像上面的例子一样，通过对象来定义是
最佳的方式。当返回一个函数时，这个函数通常被称作链接传递（postLink）函数，利用它我们
可以定义指令的链接（link）功能。由于返回函数而不是对象会限制定义指令时的自由度，因此
只在构造简单的指令时才比较有用。