如何将上传图片封装为指令

大家好，我是IT修真院成都分院第8期的学员，一枚正直纯洁善良的WEB前端程序员。今天给大家分享一下闭包是什么，用处如何。

---

一、在JS任务5-10中，会用到一个插件，用来实现图片上传功能。包含以下功能

点击按钮上传图片

图片能在本地预览

显示图片信息，显示上传进度

点击上传按钮上传到服务器

点击删除按钮，删除。

上传按钮只能按一次

二、基础知识

关于指令，因为我们是有直接讲指令的小课堂的，所以这里就简单说一下。

angular指令本质上就是AngularJs扩展具有自定义功能的html元素的途径。

内置指令，打包在AngularJs内部的指令，所有内部指令的命名空间 都使用ng作为前缀，所以在写自定义指令的时候，避免用ng作为指令命名的前缀。

创建指令的方式有四种，在指令里用 restrict属性控制:

E:元素

A:属性

C:css类

M:注释

向指令中传递数据，用template属性

directive 在使用隔离 scope 的时候，提供了三种方法同隔离之外的地方交互：

@ 绑定一个局部 scope 属性到当前 dom 节点的属性值。结果总是一个字符串，因为 dom 属性是字符串。

= 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。

& 提供一种方式执行一个表达式在父 scope 的上下文中。如果没有指定 attr 名称，则属性名称为相同的本地名称。（其实说白了，就是可以使用在父scope中定义的函数。）

replace：是否用模板替换当前元素。

true : 将指令标签替换成temple中定义的内容,页面上不会再有标签；

false ：则append（追加）在当前元素上，即模板的内容包在标签内部。默认false。

3.常见问题：如何实现封装？

视频：

问题：

1、指令中link和controller属性有什么区别？

这两个都可以获取到作用域，元素，属性等引用，也都会执行一次。那当我们每次想要扩展个自定义指令时，应该用哪个？

控制器可以暴露一个API，而link可以通过require与其他的指令控制器交互

所以如果要开放出一个API给其他指令用就写在controller中，否则写在link中。简单来说，优先使用link。

2、如何解除上传图片大小的限制？

我是直接判断input文件大小。

3、如何一次性上传多个图片？

使用formdata.append追加图片。

scope.disUp = true;

var img = angular.element("#"+scope.imgId).get(0).files[0];

var imgForm = new FormData();

imgForm.append("file",img);