angularJS的指令封装
什么是angular的指令？
指令，说的直白一点就是一个标签，只要贴上这个标签，那么就是执行某个函数，完成某个动作！在angular框架理念中，指令也是核心的模块之一。这么说吧，web前端原生开发常常是获取DOM模型进行操作，而angular的指令系统就是解放了这个过程，就好像乌鸦想要喝瓶子里面的水，以前是需要把石头进去，才能够喝到水，现在呢？不用了，angular弄了一个小洞，只是想喝水就必须展示angular认可的标签，再也不用辛辛苦苦捡石头了。
angularJS框架封装了自己的指令，有着完善的指令系统，如ng-model,ng-bind,ng-view.....。通过特定的指令触发特定的控制器函数，来完成特定的动作，就如数据绑定，路由选择等。这些指令给开发人员带来了福利与便捷，更是带来了开发方式的颠覆！毫无疑问，angular以一种全新的开发方式席卷而来，它给人们带来了一种新的开发理念：更便捷，更快速，更好的用户体验！
为什么要封装指令？
也许有些有些开发人员会问，为什么要封装指令，以原生方式开发不是挺好的吗？我觉得，我甚至肯定，说出这句话或者这样想的人可能没有深刻的理解angularJS指令，更没有深刻接触angularJS！就像生活在偏远的山村，有吃有喝，温饱无忧，就觉得生活很完美，谁曾想，城市的生活更是便捷、快乐幸福！这是眼界问题，这是经历问题，对于没有接触过的人，这是很正常的。因为，我曾经也是这样想的，觉得jquery，或者原生开发不是挺好的吗？那时候，我刚刚接触angular, 觉得有点深奥，但是它的双向数据绑定指令确实是jquery写的便捷很多，用起来也很方便，体验也很不错，我把它归结为指令的魅力，以简单的语句实现复杂的功能，你可以试试，就那么两三句的代码，让你走进angular的指令世界！
指令怎么执行
有时候，人们会使用了一种工具，想要掌握这种工具，于是会情不自禁地去探索。就像远古的人们，发现火，然后掌握火，于是人类的文明向前迈进一大步！angular给我们提供了便捷地指令系统，我们会情不自禁地去想，它是怎么运行的，我怎么才能去掌握它？
指令它通过一个函数（我称之为指令函数），通过这个函数，可以获取这个指令的属性值，指令所在的标签元素。然后通过控制器函数控制数据的修改。这个具体的过程是：指令发出信号-->控制器函数控制的数据-->指令函数获取数据--->渲染到标签上
angular的指令封装
angular的指令封装让我觉得有点像css的@import,对，就是这种感觉。但是angular它会把模块都封装在指令中，如果使用的时候，直接用指令就可以代替模块了，我感觉，这才触摸到了angular的核心！你想想，当一个功能成为你的一个模块，随时可以调用，随时可以修改模块的数据，便捷，更是迅速还有解耦合，而且感觉上维护更是方便，哪个模块需要修改就改哪一个。所以，我觉得，这是angular之所以能够迅速火起来的原因。
+ template方式
html文件（当然，其他部分省略哈哈）
<btn primary=true lg=true danger=true></btn>
js文件
myapp.directive('btn',[function(){
return {
//这是指令函数获取页面数据的对象，类似于$scope获取绑定数据
scope : {
primary:'@',//'@'是'@primary的缩写'，是元素primary属性的值
lg:'@',
danger:'@'
},
restrict : 'ECAM',//E --element,C ---class ,A ---attribute,M--comment
//必要属性，是否显示/嵌入当前模板
transclude : true,
replace : true,
//根据获取的数据定义模板
template:'<button class="{{primary ? \'btn-primary\' : \'\'}} {{lg ? \'btn-lg\' : \'\'}} {{danger ? \'btn-danger\' : \'\'}}" ng-transclude>Mrhzj</button>'
}
几点需要注意：
+ transclude是必选项，不填你试试
+ replace 意思是是否用本模板替代原来的元素标签，你可以不填，默认显示原来的标签下嵌套模板
+ restrict 限制那种方式的替代，说白了就是你的指令是作用于那种方式的
+ scope这我就不说了，上面白纸黑书，大爷您瞧瞧吧
css文件
自己定义的一些样式，不要太懒，我就省略一些了！
.primary,.lg,.danger {
height: 50px;
width: 150px;
background-color:skyblue;
border-radius: 5px;
text-align: center;
display: inline-block;
color:#fff;
transition: 2s ease-in;
}
.lg {
width: 200px;
height: 80px;
font-size: 20px;
}
.danger {
background-color:red;
}
最后你会看到，这样的效果：
这样子的效果感觉还是有点差强人意，我就在想：能不能所有的模块（导航，轮播，轮播。。。）能不能都集结在一个控制器里，如果哪天我不想要这些，想换新的，直接改控制器了里面的数据就行了，而不是还需要改html或者模板。
于是我尝试了另一种写法：
+ templateUrl方式封装指令
与上面的方式大体一致，只是模板是从外部引进。这里需要注意的是引进来的路径是相对于本文件的路径（相对路径，绝对路径就不用理会）。
这里指的一提的是，假如传进来的数据不是想要的格式，必须通过link属性进行转换到想要的格式，此时，对象的zi子对象scope属性值应该为空，不然，拿不到想要的数据。