AngularJS directive 创建属于你自己最简单的指令

最近写了一个自己做的angular动画插件，想要把它封装成比较通俗的指令，于是在网上找了好多angular封装指令的方法，下面就来给大家分享一下。。。。。

首先介绍一下angular指令的表现形式，目前我了解到的主要有四种：

1. 一个新的HTML元素

<data-hello></data-hello>

    2.元素的属性

<input type="text" data-hello/>

    3.CSS class

<input type="text" class="data-hello"/>

    4.注释

<!-directive:data-hello->

那OK，既然我们知道了angular的指令使用方法，下面我们就要学会怎么做一个指令啦

那么现在就来做一个最简单的hello-word指令

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

那么这个指令我们封装好了，怎么调用呢？  很简单，看下面-------

<hello-world>
//write something
</hello-world>

没错，这样最简单的一个Hello World指令就做好了，那么接下来说一下这个方法，

directive这个方法有两个参数，

第一个当然就是我们要做的这个指令的名字啦，记住这里要用驼峰（cameCase）命名法，这样我们调用这个指令的时候，就可以用hello-world来调用了。

第二个参数是一个回调函数，我们所要做的所有功能都是写在这个回调函数里面的。OK，接下来就仔细讲一下这个回调函数

大家可以很明显地看到，这个函数需要返回了一个对象，那么它返回的这个对象中有三个属性，接下来我们介绍一下这三个属性的作用：

1. restrict-这个属性用来指定指令在HTML中如何使用，就是我们之前说的四种表现形式。。。  在这个例子中，我们使用了'AE'，所以这个指令可以被当做新的HTML元素或者属性来使用，那么如果我们想要让这个指令当做class来使用呢？我们可以将restrict这个值设置成  'AEC'

2. template-这个属性规定了指令被Angular编译和链接后生成的HTML标记。当然了，我们可以把这个值变得很复杂，可以在这里面写多个div，多个样式，那么你就会想到，既然这样，我是不是完全可以写一个页面呢？  当然是可以的，甚至于你可以将你要实现的模板写到一个HTML文件里，然后将这个值改为templateUrl，将templateUrl指向你说写的HTML文件，这就有点像是模板注入了，所以这个地方是可以很灵活地使用的。。。哈哈，是不是发现有点骚

3. replace-这个属性指明生成的HTML内容是否会替换掉定义此指令的HTML元素。在我们刚才的这个例子中，我们用了

   <hello-world></hello-world>的方式来使用我们的指令，并且将replace设置为true，因此，在改指令被Angular编译后，生成的模板会替换掉<hello-world></hello-world>。所以最终输出的是<h1>Hello World!</h1>。那么如果将这个值设置成false会怎么样呢？那么生成的模板会被插入到定义指令的元素中。

好啦，到这里，我们最简单的一个Angular自定义指令就完成了，是不是很简单呢。。。

当然啦，肯定会有人问，这样我要做的功能很复杂怎么办？要调用到页面元素怎么办？要有动态渲染怎么办？

这些其实都是可以实现的，我们可以在directive的回调函数中，将返回的对象加入更多的属性值，以此来达到我们更多的目的。。。具体步骤我们下次再来一篇深入的介绍哈O(∩_∩)O