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 數據綁定及其語法。
綁定的類型可以根據數據流的方向分成三類: 從數據源到視圖、從視圖到數據源以及雙向的從視圖到數據源再到視圖。
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。