Angular 学习笔记之 Directive

[Hugo-seth]

今天整理一下Angular重点之一的Directive。directive，中文叫指令。大家应该都知道了controller是操作数据的地方，而dom操作应该都放到directive里，当然指令的作用肯定不止是操作dom。

angular的项目时时刻刻都是在跟指令打交道，像常用的也是自带的一些指令如：ng-click、ng-if、ng-repeat等。像这些自带的指令就没什么好说的了，大家移步文档看就行了。

我要讲的主要就是自定义指令：举3个例子，简单介绍如何创建自定义的指令。

我们先来一个最简单的例子来了解自定义指令以及指令如何与controller进行交互：用my-click自己实现ng-click。

首先给button按钮添加my-click属性，重点看一下controller定义的函数和directive方法创建指令。

directive里的restrict属性，它告诉AngularJS这个指令在DOM中以何种形式被声明。有E（元素）、A（属性）、C(类名)、M(注释) 4种方式，restrict的默认值是A,即以属性的形式来进行声明。这里值为A即属性。link方法注入了三个依赖(scope, ele, attr)（link里的scope习惯不加$），scope就不用多说了吧，ele表示directive绑定的元素，attr表示元素上的属性（它是一个对象），想深入了解的请自行log出来。这里最重要的莫过于scope.$apply方法，其实这里可以不需要$apply方法，因为没涉及到数据的更新，但是一般都会这样写，因为扩展print函数的时候就不用改了，$apply方法就是要手动触发angular的脏值检测，简单理解就是更新数据的意思。这个知识点是非常重要的，当我们用angular自带的方法是不需要手动触发脏值检测的，比如 $timeout ，但我们要是用 setTimeout 的话就要去手动触发，不然视图上绑定的值是不会更新的。

我们点击按钮之后看下输出：

很明显，这个自定义的指令是work的。

我们来实现一个上传图片的指令file-upload：

这里就用到了更多的directive属性：scope属性表示创建独立作用域（只要写了这个属性，不管值为空对象还是非空），它的值是一个对象，里面可以绑定所在视图controller的字符串、函数及双向数据绑定），想详细了解的请自行google,一定要重点了解一下scope属性的用法。这里的$scope.$apply()就有大用处了，在link里一定要手动触发脏值检测才会更新数据。

我们选择图片后：

自定义上传图片的指令就完成了，大家可以试下不加$scope.$apply()看下结果。

再来了解一下directive里用到controller方法的情况。这里我就不贴完整的代码了。

controller方法跟link方法有一些区别：不需要手动调$apply方法，会自动更新数据；可以使用我们之前提到的broadcast、emit、on方法进行通信。

最后，提醒大家一点：html里所有的directive和与directive相关的属性的用_连字符 -_ 的写法，如file-data，在directive里用驼峰写法，如fileData。不然的话，会很坑的。