擴展的HTML屬性

Question

我是網頁開發的初學者，我有一些誤解。

從wwwschools：

AngularJS extends HTML with new attributes. 

所以angularJS使用例如ng-model，ng-app等。 我的問題是

1. 爲什麼AngularJS會這樣做，添加自定義屬性會導致HTML無效？
2. 我可以添加自己的屬性，如<h myAttr="hello">，然後用JS訪問它，就像普通屬性一樣嗎？

Answer 1

Angular不會自動添加它們。它允許你使用一些自定義屬性，如ng-model來處理它的功能性的東西，但你必須自己設置它們。

如果使用非標準屬性困擾您，您可以用data-*有效屬性替換它們，如data-ng-model="stuff"。

最後，添加您自己的自定義屬性（通常稱爲Angular中的指令）經常使用。您可以查詢angular doc以瞭解如何實現此目的的提示。

Answer 2

1. 爲什麼AngularJS做到這一點，添加自定義屬性時，使HTML無效？

的想法是，你可以寫自己的自定義自包含的元素更好地解釋他們的目的是什麼。例如，而不是：

<div class="date-picker" data-initial="2015-08-08"></div> 

你可以寫：

<date-picker value="2015-08-08" /> 

這更是不言自明的比一個普通<div>有特殊標記的CSS類。

當然，這不僅僅是開箱即用，您必須通過編寫Angular directive來定義這個新的日期選取器元素。

我可以添加自己的屬性等，然後用JS訪問它就像一個正常的屬性？

是的，你可以通過寫一個新的指令（見上文）。