数据绑定
Angular 提供了各种各样的数据绑定,绑定的类型可以根据数据流的方向分成三类: 从数据源(类文件中的数据)到视图(模版文件的显示)、从视图(模版文件的显示)到数据源(类文件中的数据)以及双向的从视图(模版文件的显示)到数据源(类文件中的数据)再到视图(模版文件的显示)。
数据方向 | 语法 | 绑定类型 |
单向:从数据源--->视图 |
| 插值表达式 属性 Attribute CSS 类 样式 |
单向:从视图--->数据源 |
| 事件 |
双向:从视图<--->数据源 |
| 双向绑定 |
在Angular中一旦开始数据绑定,就跟 HTML attribute 没有什么关系了。
HTML attribute 与 DOM property 的对比
attribute 是由 HTML 定义的。property 是由 DOM (Document Object Model) 定义的。
-
有很少的一部分 HTML attribute 和 property 之间有着 1:1 的映射,如
id
。 -
有些 HTML attribute 没有对应的 property,如
colspan
。 -
有些 DOM property 没有对应的 attribute,如
textContent
。
有很多 HTML attribute 看起来映射到了 property,但是其中的含义并不是看起来的那么简单。
attribute 初始化 DOM property,然后它们的任务就完成了。property 的值可以改变;attribute 的值不能改变。
例如,当浏览器渲染 <input type="text" value="Bob">
时,它将创建相应 DOM 节点, 它的 value
这个 property 被初始化为 “Bob”。
当用户在输入框中输入 “Sally” 时,DOM 元素的 value
这个 property 变成了 “Sally”。 但是该 HTML 的 value
这个 attribute 保持不变。如果你读取 input 元素的 attribute,就会发现确实没变: input.getAttribute('value') // 返回 "Bob"
。
HTML 的 value
这个 attribute 指定了初始值;DOM 的 value
这个 property 是当前值。
注意:disabled
这个 attribute 是另一种特例。
按钮的 disabled
这个 property 是 false
,因为默认情况下按钮是可用的。 当你添加 disabled
这个 attribute 时,只要它出现了按钮的 disabled
这个 property 就初始化为 true
,于是按钮就被禁用了。
添加或删除 disabled
这个 attribute 会禁用或启用这个按钮。但 attribute 的值无关紧要,这就是你为什么没法通过 <button disabled="false">仍被禁用</button>
这种写法来启用按钮。
设置按钮的 disabled
这个 property(如,通过 Angular 绑定)可以禁用或启用这个按钮。 这就是 property 的价值。
所以,就算名字相同,HTML attribute 和 DOM property 也不是同一样东西。
注意:模板绑定是通过 DOM property 和事件来工作的,而不是HTML attribute。
在 Angular 的中,HTML attribute 唯一的作用是用来初始化元素和指令的状态。 当进行数据绑定时,只是在与元素和指令的 property 和事件打交道,和attribute就完全没有关系了。
绑定目标
数据绑定的目标是 DOM 中的某些东西。 这个目标可能是(元素 | 组件 | 指令的)property、(元素 | 组件 | 指令的)事件,或(极少数情况下) attribute 名。
绑定类型 | 目标 | 数据流向 | 范例 |
---|---|---|---|
属性 | 元素的property 组件的 property 指令的 property | 单向绑定, 数据: 数据源->模版 |
|
事件 | 元素的事件 组件的事件 指令的事件 | 单向绑定, 数据: 模版->数据源 |
|
双向 | 事件与 property | 双向绑定, 数据: 模版<---->数据源 |
|
Attribute | attribute(例外情况) | 单向绑定, 数据: 数据源->模版 |
|
CSS 类 |
| 单向绑定, 数据: 数据源->模版 |
|
样式 |
| 单向绑定, 数据: 数据源->模版 |
|