【JS-09】

分享人：许永坚

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

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.编码实战

6.扩展思考

关于scope的概念，与应用

7.参考文献

$http

FileReader : EventTarget

文件和二进制数据的操作

8.更多讨论

关于自定义指令的复用性+

鸣谢

感谢大家观看

BY : 刘思言|肖浩宇|许永坚