https://angular.cn/docs/ts/latest/guide/template-syntax.html#!#html
模板中的HTML
HTML 是 Angular 模板的语言。几乎所有的HTML语法都是有效的模板语法。 但值得注意的例外是<script>
元素，它被禁用了，以阻止脚本注入攻击的风险。（实际上，<script>
只是被忽略了。） 参见安全页了解详情。
有些合法的 HTML 被用在模板中是没有意义的。<html>
、<body>
和<base>
元素这个舞台上中并没有扮演有用的角色。剩下的所有元素基本上就都一样用了。
可以通过组件和指令来扩展模板中的 HTML 词汇。它们看上去就是新元素和属性。接下来将学习如何通过数据绑定来动态获取/设置 DOM（文档对象模型）的值。
我们首先看看数据绑定的第一种形式 —— 插值表达式，它展示了模板的 HTML 可以有多丰富。
模板表达式
模板表达式产生一个值。 Angular 执行这个表达式，并把它赋值给绑定目标的属性，这个绑定目标可能是 HTML 元素、组件或指令。
{{1 + 1}}
中所包含的模板表达式是1 + 1
。 在属性绑定中会再次看到模板表达式，它出现在=
右侧的引号中，看起来像这样：[property]="expression"
。
编写模板表达式所用的语言看起来很像 JavaScript。 很多 JavaScript 表达式也是合法的模板表达式，但不是全部。
JavaScript 中那些具有或可能引发副作用的表达式是被禁止的，包括：
赋值 (=, +=, -=, ...)
new运算符使用;或,的链式表达式
自增或自减操作符 (++和--)
和 JavaScript语 法的其它显著不同包括：
不支持位运算|和&具有新的模板表达式运算符，比如|和?.
绑定语法：概览
数据绑定是一种机制，用来协调用户所见和应用数据。 虽然我们能往 HTML 推送值或者从 HTML 拉取值， 但如果把这些琐事交给数据绑定框架处理， 应用会更容易编写、阅读和维护。 只要简单地在绑定源和目标 HTML 元素之间声明绑定，框架就会完成这项工作。
Angular 提供了各种各样的数据绑定，本章将逐一讨论。 不过我们要先从高层视角来看看 Angular 数据绑定及其语法。
绑定的类型可以根据数据流的方向分成三类： 从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。
image.png
HTML attribute 与 DOM property 的对比
要想理解 Angular 绑定如何工作，重点是搞清 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…… 但却不像我们想的那样！
最后一类尤其让人困惑…… 除非我们能理解这个普遍原则：
That last category is confusing until you grasp this general rule:
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 attribute value指定了初始值；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 也不是同一样东西。
这句话值得再强调一次：
模板绑定是通过 property 和事件来工作的，而不是 attribute。
网友评论