AngularJS指令用法详解

本文实例讲述了AngularJS指令用法。分享给大家供大家参考，具体如下：

指令（directives）是任何AngularJS应用中最重要的成分。尽管AngularJS已经自带了很多指令，你经常会发现需要自己亲手创建一些特别的指令。本文将会带你了解自定义指令并解释如何在现实世界中的Angular项目中使用它们。文章的最后，我们将一起用Angular指令来创建一个简单的笔记小应用。

综述

一个指令就是一个引入新语法的东西。指令是在DOM元素上做的标记，并同时附加了一些特定的行为。例如，静态的HTML并不知道如何来创建并显示一个日期选择插件。为了将这个新语法教给HTML我们需要一条指令。这个指令将会创建一个充当日期选择器的元素。我们将在随后看到如何实现这个指令。

如果你之前已经编写过Angular应用，那么你已经使用过指令了，不管你有没有意识到这点。你可能已经使用过像是ng-model，ng-repeat，ng-show等等这样的指令。所有这些指令都将特定的功能绑定到了DOM元素之上。例如，ng-repeat会重复特定的元素，而ng-show会有条件的展示元素。如果你想要创建一个可拖动元素的话你可能需要创建一个指令。指令背后的基本思想很简单。它通过在元素上绑定事件监听器并且将DOM变形来使HTML变得具有交互性。

从jQuery的角度来看指令

想想你如何使用jQuery来创建一个日期选择器。我们首先在HTML中添加一个普通的input字段然后在jQuery中我们调用$(element).dataPicker()来将其转换为一个日期选择器。但是，考虑一下。当一个设计师想要来检查这个标记时，他/她能够立刻猜出这个字段究竟是干什么用的吗？它仅仅是一个普通的input字段还是一个日期选择器？你必须要查看jQuery来确认这点。Angular的方法是使用指令来扩展HTML。因此，一个日期选择器的指令看上去可能如下所示：

<date-picker></date-picker>

或者如下所示：

<input type='text' data-picker/>

这种创建UI成分的方法既直观又清楚。你可以看到元素就知道它的用途。

创建自定义指令

一个Angular指令可能以四种形式出现：

1.一个新的HTML元素（<date-picker></date-picker>）

2.一个元素上的属性（<input type='text' date-picker/>）

3.作为一个类（<input type='text' class='date-picker'/>）

4.作为注释（<!--directive:date-picker-->）

当然，我们完全可以决定我们的指令以什么形式出现在HTML中。现在，我们来看看一个典型的Angular指令是如何写成的。它和controller的注册方式类似，但是它会返回一个简单的对象（指令定义），其中那个包含有一些配置指令的属性。下面的代码展示了一个简单和Hello World指令：