怎么将图片上传封装成指令？

1.背景介绍

在js-task-9内，我们需要实现一个将本地图片上传的功能，并且能够进行预览并且将图片的一些属性展示出来。 为了实现这个功能，我们利用所学的angular知识来做一个功能比较简单的图片上传组件。

2.知识剖析

基础知识

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

1. angular指令本质上就是AngularJs扩展具有自定义功能的html元素的途径。
2. 内置指令，打包在AngularJs内部的指令，所有内部指令的命名空间 都使用ng作为前缀，所以在写自定义指令的时候，避免用ng作为指令命名的前缀。
3. 创建指令的方式有四种，在指令里用 restrict属性控制:E:元素A:属性(这个是比较推荐的方式)C:css类M:注释
4. 向指令中传递数据，用template属性

组件功能

功能：

• 点击按钮上传图片
• 图片能在本地预览
• 显示图片信息，显示上传进度
• 点击上传按钮上传到服务器
• 点击删除按钮，删除。

3.常见问题

如何实现组件

4.解决方案

5.编码实战

demo

6.扩展思考

关于scope的概念，与应用:

以下内容参考自：https://segmentfault.com/a/1190000002773689

当我们将 scope 设置为 true 的时候，我们就新创建了一个作用域，只不过这个作用域是继承了我们的父作用域；我觉得可以这样理解，我们新创建的作用域是一个新的作用域，只不过在初始化的时候，用了父作用域的属性和方法去填充我们这个新的作用域。它和父作用域不是同一个作用域。

当我们将 scope 设置为 false 的时候,我们创建的指令和父作用域（其实是同一个作用域）共享同一个 model 模型，所以在指令中修改模型数据，它会反映到父作用域的模型中。

false效果共享同一个model模型，在一个作用域中：

true效果创建一个作用域，并继承父作用域，初始化的使用用了父作用域的属性和方法填充我们这个新作用域。已经不是同一个作用域了。

{}效果：

@

这是一个单项绑定的前缀标识符

使用方法：在元素中使用属性，好比这样 <div my-directive my-name="{{name}}"></div> ，注意，属性的名字要用 - 将两个单词连接，因为是数据的单项绑定所以要通过使用 {{}} 来绑定数据。

=

这是一个双向数据绑定前缀标识符

使用方法：在元素中使用属性，好比这样 <div my-directive age="age"></div> ,注意，数据的双向绑定要通过 = 前缀标识符实现，所以不可以使用 {{}} 。

&

这是一个绑定函数方法的前缀标识符

使用方法：在元素中使用属性，好比这样 <div my-directive change-my-age="changeAge()"></div> ，注意，属性的名字要用 - 将多个个单词连接。

7.参考文献

$http

FileReader : EventTarget

文件和二进制数据的操作

8.更多讨论

关于自定义指令的复用性

问答互动：

1.自定义指令中link和controller的区别?

link和controller的相同点在于里面都可包含数据源和操作。不同点在于：link能控制渲染html元素的过程，而controller不能，controller的模版写死的，仅侧重于提供数据源和操作。

2.scope:false 和 scope:true的相同点？

在页面加载的时候都继承了父作用域的属性和元素，并用于填充自己作用域的内容。

3.scope:false 和 scope:true的不同点？

虽然都继承了父作用域的属性和元素，但是scope:true已经是一个新的作用域了，内部的修改已经和父作用域没有关系了。