[Angular學習紀錄] Template binding property or attribute?

Attribute 和 Property 這兩個英文單字翻譯成中文都稱作 "屬性"。

而且也應該知道Angular可以透過 "屬性" 的綁定，讓Component和Html Template之間可以進行溝通，但常常有時候會發生一些特例，因而讓應用程式無法正常的運作。

舉個簡單的例子，表格欄位物件 td 內有一個合併儲存格 colspan 的屬性，它是一個可用的屬性(Html Attribute)，但是實際將該屬性綁定後卻出現錯誤，為何會發生這種錯誤?

回過頭來必須先了解 Attribute 和 Property 之間的定義，在此簡單的說明如下 :

• Attribute，是由HTML來定義的(這裡指的是HTML標籤內的屬性)，一般來說它的值應該都為字串。
• Property，是由 DOM (Document Object Model)所定義的，通常都使用JavaScript來控制它。

瀏覽器會在文件載入時開始剖析Html，並為每個HTML Attribute建立對應的DOM Property，大部分的情況會是一對一的關係，通常Attribute名稱是什麼，Property名稱也會是什麼，如果標籤上有設定某個Attribute，則Attribute值為何，Property值也就為何。例如 Attribute的name 會對應 DOM的name。

儘管很多時候是一對一的關係，但仍有許多特例的存在，例如attribute的class對應到dom的className，下圖就是分別透過Attribute和Property設定值的結果(特例)。

正常情況下，在剖析完成並初始化Property後，Attribute的任務就算結束了，如果直接修改DOM上的Property，Attribute中對應的屬性並不會有變化，舉個例子，value這個屬性，下圖範例初始化輸入框的Value為 "Hello Lawrence"，此時再輸入框內輸入任意資料，再點擊按鈕，觀看結果可以發現，此時的HTML Attribute依然一開始設定的資料。除非使用setAttribute的方法才可以將值改變(參考下圖綠框處)。

PS. 之所以會說正常情況下Attribute的任務在初始值設定完就結束了是因為，某些條件下可能需要點擊了某些按鈕會產生一些CSS的特效的時候，會使用setAttribute()再attributes中設定屬性，此時相對應的DOM特性值也會改變。

好了，前面寫了這麼多說明只是想要表達在Angular中的 "屬性" 指的是哪個部分。因此順道一提，在Angular中的 "屬性綁定"指的都DOM的Property，原則上都沒有跟HTML Attribute有什麼直接的關聯。白話文就是，Angular的屬性是在設定 DOM 元素、組件和指令的Property。

PS. 組件和指令的Property牽扯Angular其它範圍，在本文內暫不討論。

本文撰寫時Angular版本為v4.0

參考網站
Angular官網(模板绑定語法)
DOM 中 Property 和 Attribute 的区别
[轉載] 屬性(Attribute)與特性(Property)