原文链接: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、注释