angular directive简介

         小白第一次学习angularjs，入门看了两天的菜鸟教程，但还是很多都不太懂，刚好公司代码中用了很多自定义命令，这几天又转战看了一下directive相关的知识，里面还是有很多挺复杂的东西，网上的东西都介绍得很乱，不太有体系，这里就稍微简单介绍一下简单的东西。

directive简介

         Directive是用来自定义命令，其实就是自定义一些标签（element）、属性（attribute）、类（class）、注释（这个貌似用得很少），就是自己在html中自定义一些东西。

AngularJs基础知识介绍

         在讲directive之前，还是需要对angular一些基础的东西进行理解一下（老鸟请略过本节，后面说的都是自己个人理解，如有不对还请指正），不多也很简单。AngularJs是用来动态修改静态html页面的框架，亮点就在于不用请求后端，就可以更改页面，如果不这样的话，没更改一次页面就请求一次后端，效率比较低，并且写代码的时候PHP和html混在一起，我自己写的代码我自己都看不下去了（之前不了解angular）。这框架还是MVC的思想（如果新手不了解啥叫MVC，可以看我上一篇博客，虽然是讲Spring的，但也提到了MVChttp://blog.csdn.net/u011579138/article/details/51420185）

         angular里面都是一些命令（如ng-if，ng-model，ng-controller这些），每个命令可以理解为一个小的域。这里的域里面可以包含MVC，每个域就是个小的模块。Directive也就是自定义一个命令，所以里面会涉及到MVC的东西。Angular动态修改页面，其实也就是通过更改html上的一些变量数据，如图所示，tips和zz-tips也就是数据变量，然后可以展示出来。

也可以通过数据更改来控制一些页面，例如ng-if来控制展示什么html，隐藏什么html（入门可以看菜鸟，里面有说http://www.runoob.com/angularjs/angularjs-tutorial.html），这些更改都是在js中用$scope来进行操作，而$scope操作一般都放在controller中进行，所以这也刚好是符合MVC原则，从某种意义上可以理解为controller约等于scope，但还是有点偏颇，理解可以这样方便理解，特别是新手。每个域一定包含一些view（就是html标签），而操作这些标签靠scope。

 

Directive

         正如上面介绍，directive自定义命令也就是一个域，所以是可以包含MVC的。所以是可以用来做界面替换的，就是在别处定义一个view（一个html文件），然后通过这种方式引用到一个大的文件里面去，这样就方便各模块之间方便维护，相当于把一个大的模块分小。这也算是directive的一个优点吧。关于怎么用directive，也就是怎么定义网上都有很多资料了，这里我也就不重复造轮子了，给个博客可以自己看怎么使用，这里我就解释一下这些字段的作用。