ng-app和data-ng-app有什麼區別？

131

我已經開始瞭解AngularJS，並對ng-app和data-ng-app指令之間的區別感到困惑。ng-app和data-ng-app有什麼區別？

2013-04-24 user1876508

[ng-app vs data-ng-app可能有重複，有什麼區別？]（http://stackoverflow.com/questions/16589853/ng-app-vs-data-ng-app-what - 這是差異） – chenrui 2015-02-03 18:10:17

@chenrui - 這個問題首先順便說一句。（4月24日vs 5月16日） – 2015-04-02 12:52:17

即使使用ng-app或data-ng-app，您的應用程序也不會受到影響，而且Angular會按預期工作，但正如@ user2289659所提及的，使用data- *引入了自定義屬性從HTML5開始的標準 – 2016-02-24 09:04:11

無在運行時的行爲而言，這些都是這裏描述的只是不同風格的命名指令：http://docs.angularjs.org/guide/directive

指令有駱駝套管的名稱，如ngBind。該指令可以是，通過將駝峯案例名稱翻譯爲蛇案，並使用這些特殊字符：， - 或_來調用。該指令可以是，前綴爲x-或data-，以使其符合HTML驗證器。這裏的是一些可能的指令名稱列表：ng：bind，ng-bind， ng_bind，x-ng-bind和data-ng-bind。

你可以從閱讀這個data-看到可以用來使你的HTML通過HTML驗證測試/

來源

2013-04-24 06:03:13

HTML的規範允許這樣做嗎？ – user1876508 2013-10-27 04:33:19

@ user1876508：http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes – 2013-10-27 10:01:02

在現代瀏覽器沒有區別，但在舊的IE外，他們將不能工作，除非你聲明一個定義它的XML名稱空間。

還有一個驗證差異，ng-app是無效的XHTML，並且會導致您的網頁無法通過HTML驗證。 Angular允許您將其指令前綴data-或x-以允許其驗證。

來源

2013-04-24 10:35:36

這似乎是隻有當你使用「ng：」時纔是如此。我相信「data-ng-」應該被驗證。 – 2014-09-23 12:30:50

可以聲明角命名空間<html xmlns:ng="http://angularjs.org" ng-app>

來源

2013-05-20 17:13:13 Mounir

這似乎只適用於傳統應用程序：「如果您選擇使用舊樣式指令語法ng：然後在html中包含xml-命名空間以使IE快樂（這是由於歷史原因，我們不再推薦使用ng :.）「。資料來源：https：//docs.angularjs.org/guide/bootstrap – 2014-09-23 12:29:43

117

大多數答案都是簡單地說使模板有效的HTML，或HTML驗證符合，沒有解釋什麼是那些術語的意思是，無論是。

我不確定，但我猜測這些條款適用於HTML驗證程序，它掃描您的代碼以獲得標準符合性 - 類似lint。他們不認可ng-app作爲一個有效的屬性。他們預計非默認HTML屬性的前綴爲

data-attribute_name_here。

因此，AngularJS的創建者爲其指令創建了替代名稱，其中包括前面的data-，以便HTML驗證程序將「喜歡」它們。

來源

2013-11-07 03:15:50

+1「OK。那麼，'validator compliant'是什麼意思？做法。如果你已經完成了研究，你會發現你猜對的主要是正確的。 =） – slacktracer 2013-11-24 17:23:50

+21

有效的HTML不適用於HTML驗證器。瀏覽器解析HTML。如果您開始偏離HTML規範，則不能保證您的HTML將被正確解析。 – Blender 2014-01-12 10:37:11

是的，驗證器是達到目的的一種手段。我們的目標是讓您的網頁儘可能接近規格，從而最大限度地提高瀏覽器的數量 - 舊式，現在和未來 - 您的應用程序將按照預期實際運行。在「data- *」的情況下，還有風險瀏覽器可能引入與標準相同的屬性，這會與應用程序的屬性相沖突。此外，堅持這樣的標準將有助於工具（例如編輯）理解它並使它們對您更有用。 – mahemoff 2014-07-12 19:49:24

如果您想使頁面HTML有效，則可以使用data-ng-而不是ng-。
這將拋出一個錯誤

<div ng-app=""> 

    <p>Input something in the input box:</p> 
    <p>Name: <input type="text" ng-model="name"></p> 
    <p ng-bind="name"></p> 

</div>

這不會拋出一個錯誤

<div data-ng-app="scope" data-ng-init="name='test'"> 

    <p>Input something in the input box:</p> 
    <p>Name: <input type="text" data-ng-model="name"></p> 
    <p data-ng-bind="name"></p> 

</div>

來源

2016-03-17 16:12:09

-2

當然還有兩者之間沒有什麼區別，只是某些HTML5校驗器將拋出一個錯誤在像ng-app這樣的屬性上，但是他們不會拋出任何以data-爲前綴的錯誤，比如data-ng-app。所以在我們的角度指令中使用數據前綴是很好的。

即使你可以利用的角度指令在下述方面 NG綁定，NG：綁定，ng_bind，數據-NG綁定，X-NG-綁定

來源

2016-07-07 07:51:20

這兩個詞之間的基本區別是， data-ng-app驗證HTML，而後者不用。功能保持不變。欲瞭解更多參考，你可以嘗試w3Validator。

來源

2017-04-04 11:54:29