AngularJS directives实践(一)

原文请参照此处

对于基于AngularJS 的应用来说, directive是非常重要的组件。虽然AngularJS自带了非常丰富的directive组件，你可能任然需要开发适合你自己应用的directive组件。现在就来看看怎么编写自定义directive吧

简介

directive会为应用引入新的语法。directive是DOM元素的标识组件。当我们为一个DOM元素添加一个directive后，就给这个DOM元素赋予了特别的功能。举个栗子，静态的HTML并不会提供一个日历选择器(HTML5?)。但是我们可以用directive来告诉HTML把某个元素显示为日历选择器。这个directive会通过某种方式来生成一个具有日历功能的元素。

如果你编写过AngularJS应用，那么其实你已经接触过directive了。比如ng-model,ng-repeat, ng-show 等等。 ng-repeat 会生成多个指定的DOM元素，ng-show 可以隐藏或者显示某个DOM元素。如果你想为某个元素增加拖放功能，那么你可以自己编写一个directive(当然是很难的)。但是directive得基本思想是很简单的：通过在DOM元素上添加监听器，或者把DOM元素进行转换，就可以让HTML更具交互性。

JQuery处理

 回想一下你是怎么用JQuery编写日历选择器的。 首先在HTML文档中添加一个input元素，然后用$(element).datePicker()来转换。看起来很简单，但是这样做有什么问题吗? 问题在于当我们直接阅读HTML文件时，我们不能准确的知道这个input元素最后表现为什么形式。是一个简单的文本输入还是一个日历选择器。AgularJS的处理方式就是用directive来扩展HTML元素。 因此，在angularJS中，日历选择器可能是以下形式:

1. Element
<date-picker/>
2. Attribute
<input date-picker/>

自定义directive

AngularJS有以下几种directive形式

1. Element <date-picker></date-picker>

2. Attribute <input date-picker></input>

3. Class <input class='date-picker'>

4.Comment <!-- directive:date-picker -->

现在我们来自定义一个directive

var app = angular.module('App',[]);
app.directive('helloWorld',function(){
 return {
   restrict : 'AE',
   replace : 'true',
   template : '<h3>Hello World!</h3>'
};
});

我们定义了一个名为helloWorld的directive。现在就可以在HTML中使用它了

用Element的形式引入

<hello-world/>
<hello:world/>

用Attribute的形式引入

<div hello-world></div>
<div hello:world/>

如果要兼容HTML5的话，就在前面加上 x- 或者 data-

<div data-hello-world></div>
或者
<div x-hello-world></div>

现在我们来看看directive中属性的含义

restrict  -- 指定directive在HTML中的引用形式. AE表示可以用Element或者Attribute形式， AEC 表示还可以用class的形式表示

template -- 这个就是directive的真实含义。

replace --  true表示用template来替换引入directive的HTML元素。 false表示将template插入引入directive的HTML元素内