angularjs培训之directive（1）

原文链接：http://www.sitepoint.com/practical-guide-angularjs-directives/

在angular程序中directive是很重要的组件。尽管Angularjs内置了很多的指令，但是你也经常需要创建特定功能的指令。这篇文章给大家一个指令的基本概述并且详解怎么使用。

overview

directive引进了新的语法声明。directive是通过绑定在DOM元素上的提供特定的功能，例如，静态的html不知道怎么创建和显示一个datepicker组件，为完成这个新语法功能的实现我们需要定义个directive。directive以某种方式窗机一个元素并且使他的行为类似一个datepicker。随后我们将看到这是如何实现的。

如果你以前开发过angularjs应用程序，不管你意识到与否你应该使用过指令。你可能使用过简单的指令例如ng-model,ng-repeat,ng-show等等。所有的指令都是给元素上绑定特定的行为。例如，ng-repeat复制特定的元素，ng-show 条件成立则显示某些元素。如果你要实现一个元素的拖拽功能那么你统一需要一个指令directive背后的基本思想非常简单，它使HTML真正互动通过将事件监听器或DOM元素转换。

jquery透视

考虑下如何使用jquery创建一个datepicker。首先添加一个input域然后调用jquery的$(element).datePicker()。事实上把输入的值转换成datepicker。当一个开发者检查标签时，ta可以立马就能猜出来这个输入框是什么元素？仅仅只是一个input域或是一个datepicker？你得去看下jquery的源码去确认下啦。angular的方法是使用directive扩展html。因此，datepicker的指令就可以像如下：

<date-picker></date-picker>
或者 <input type=”text” date-picker/>
这种方法创建的UI组件不但直观而且清晰。你看到这个元素就会知道它应该是做什么的。

构造自定义指令

angularjs的指令有四种表现形式：

1、新的html元素

2、元素的属性

3、class类

4、注释