AngularJS 指令解析（二）

AngularJS 指令解析（二）

---

第一篇咱们讲过了做用域（scope）这块内容，如今咱们进入正题，讲AngularJS的指令。

什么是指令？

这里咱们引用官方的一句话：
Custom directives to access the DOM: In AngularJS, the only place where an application should access the DOM is within directives. This is important because artifacts that access the DOM are hard to test. If you need to access the DOM directly you should write a custom directive for this. The directives guide explains how to do this.

翻译过来的，总结起来的意思就是应用程序能访问DOM的惟一通道就是指令。这就是这句话的意思，后面几句话是解释，就是说一方面这个东西难测试，另外你想这么作的话还能够本身写指令去直接访问DOM。

在我看来，AngularJS的指令至关于小型的组件，一方面你能够在指令里面直接操做DOM，另外一方面指令模版可使得代码控制的逻辑层面上能够结构分明，下降scope控制上的耦合度。好比一个简单的伸缩隐藏控制，通常会放到一个界面的做用域里面去统一控制，可是若是后续有其余一样的表单也有这样的处理，那就得每一个模块各自写一套了，控制上也不保证能保持一致。相比之下，咱们能够将这样相似的行为放到一个组件里面，由组件去自发的控制这个伸缩隐藏，反而能够避免不少没必要要的事情。

指令属性

restrict

这个属性定义的是指令的使用方法，分别有4种，默认是EA

• E 指定指令做为元素使用
• A 指定指令做为属性使用
• C 指定指令做为类名使用
• M 指定指令做为注释使用

我的推荐的写法是，指令用A或者C，组件用E，这样区分起来会很清楚。
而指令用A仍是用C取决于指令自身的使用范围，好比有的指令只是控制一些显示隐藏什么的，那A绰绰有余了，若是还有额外的全局样式控制，那仍是C靠谱些，这样代码还工整些。

scope

这个属性定义的是指令的做用范围，分别有3种，默认是false

• false 与父做用域共用一个做用域
• true 继承父做用域，建立一个子做用域
• {} 独立做用域，与父做用域无关联

我的的选择依据在于有木有复杂的表单交互控制，如有，则选择false能够减小一些交互上的问题，反之选true或者是独立做用域则是须要额外考量的，组件上则独立做用域会好一点，而子做用域的设立能够经过scope通讯解决一些比较小的通讯问题，同时也能保证做用域在必定程度上的独立性。

而独立做用域下有3种方式的通讯

• @ 属性侦测
• & 事件继承
• = 双向绑定（除了ngModel以外）

通常是双向绑定要好一些，特殊表单能够用双向绑定，可是数据输入这块仍是须要transclue的支持，并且直接跟父做用域交互会更好。

template or templateUrl

这个属性很简单明了，一个是指令模版字符串形式，另外一个是指令模版地址形式

replace

这个属性代表要不要作替换插入，false是做为子元素插入，反之是做为替换插入

transclue

这个能够类比vue的slot，内联插入标签内部的模版到ng-tranclude指令的标签内

controller

这个属性代表指令控制器能够建立scope，scope在link函数里面是共享的，做为link函数的第一参数，这里能够写一些须要绑定的事件，或者是数据处理

link

这个属性表示指令编译完成以后连接到DOM上的一些回调操做，pre表示连接以前，post表示连接以后，参数（做用域，模版元素，属性列表，ngModel控制器）

• pre-link
• post-link

这里能够作一些数据监控上的处理，好比属性监听，并且对DOM操做比较多的事件能够放到这里去作而不是在controller里面

compile

这个属性指的是自定义的编译方式，还有一个是参数绑定上的处理，比较危险，通常不建议操做的，参数（模版元素，属性列表）