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

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