1.背景介绍
在js-task-9内,我们需要实现一个将本地图片上传的功能,并且能够进行预览并且将图片的一些属性展示出来。 为了实现这个功能,我们利用所学的angular知识来做一个功能比较简单的图片上传组件。
2.知识剖析
基础知识
关于指令,因为我们是有直接讲指令的小课堂的,所以这里就简单说一下。
- angular指令本质上就是AngularJs扩展具有自定义功能的html元素的途径。
- 内置指令,打包在AngularJs内部的指令,所有内部指令的命名空间 都使用ng作为前缀,所以在写自定义指令的时候,避免用ng作为指令命名的前缀。
- 创建指令的方式有四种,在指令里用 restrict属性控制:E:元素A:属性(这个是比较推荐的方式)C:css类M:注释
- 向指令中传递数据,用template属性
组件功能
功能:
- 点击按钮上传图片
- 图片能在本地预览
- 显示图片信息,显示上传进度
- 点击上传按钮上传到服务器
- 点击删除按钮,删除。
3.常见问题
如何实现组件
4.解决方案
5.编码实战
demo6.扩展思考
关于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.参考文献
8.更多讨论
关于自定义指令的复用性
问答互动:
1.自定义指令中link和controller的区别?
link和controller的相同点在于里面都可包含数据源和操作。不同点在于:link能控制渲染html元素的过程,而controller不能,controller的模版写死的,仅侧重于提供数据源和操作。
2.scope:false 和 scope:true的相同点?
在页面加载的时候都继承了父作用域的属性和元素,并用于填充自己作用域的内容。
3.scope:false 和 scope:true的不同点?
虽然都继承了父作用域的属性和元素,但是scope:true已经是一个新的作用域了,内部的修改已经和父作用域没有关系了。