ng-app和data-ng-app有什么区别？

147

我已经开始学习AngularJS，并对ng-app和之间的区别感到困惑data-ng-app指令。

angularjs angularjs-directive

— 用户名
source

7

ng-app与data-ng-app的

— chenrui 2015年

8

@chenrui-这个Q首先出现。（4月24日对5月16日）

— Blundering Philosopher

1

您的应用程序不会受到影响，即使您使用ng-app或data-ng-app，Angular也能按预期工作，但正如@ user2289659所提到的，使用data- *是HTML5开始引入的自定义属性标准

— Shujaath Khan

125

这些答案中的大多数只是在使模板成为有效的HTML或HTML Validator Compliant，而没有解释THOSE术语的含义。

我不确定，但是我猜测这些术语适用于HTML验证程序，该程序会扫描您的代码以确保其符合标准-有点像皮棉。它们不能识别ng-app为有效属性。他们希望以非默认HTML属性开头

data-attribute_name_here。

因此，的创建者AngularJS已经为其指令创建了备用名称，这些指令的名称包括data-它们前面的，以便HTML验证程序会“喜欢”它们。

— 柯比·华莱士
source

4

+1表示“确定。那么，“符合验证程序的”是什么意思？” 方法。如果您进行了研究，您会发现您基本上猜对了。=）

— slacktracer

22

有效的HTML不适用于HTML验证程序。浏览器解析HTML。如果您开始偏离HTML规范，则不能保证将正确解析HTML。

— Blender 2014年

1

是的，验证器是达到目的的一种手段。我们的目标是使您的网页尽可能地接近规范，从而最大程度地增加您的应用实际可以在其中运行的浏览器的数量（旧的，现在的和将来的）。对于“ data- *”，浏览器可能会引入与标准相同的属性，这会与您应用的属性发生冲突。同样，遵循这样的标准将有助于工具（例如，编辑器）理解它，并使它们对您更有用。

— mahemoff 2014年

2

@Blender“不能保证正确解析您的HTML”，对于有效的HTML也可以这样说。

— twiz 2014年

1

@Chuck我不是建议您以一种或另一种方式来做，只是这个问题不是特别重要。我们不妨在讨论空格与制表符时对此进行辩论。哈哈

— twiz

41

就运行时行为而言，这些都不是，只是此处描述的命名指令样式不同：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验证程序测试/

— pkozlowski.opensource
source

2

HTML规范中的哪一个允许？

— user1876508 2013年

3

@ user1876508：w3.org/TR/2011/WD-html5-20110525/...

— pkozlowski.opensource

6

您可以声明角度命名空间 <html xmlns:ng="http://angularjs.org" ng-app>

— 穆尼尔
source

2

这似乎仅适用于旧版应用程序：“如果您选择使用旧样式指令语法ng：然后在html中包含xml-namespace以使IE满意。（出于历史原因，这是在此处，我们不再建议使用ng :.）“。资料来源：docs.angularjs.org/guide/bootstrap

— Chuck Le Butt

5

在现代浏览器中没有区别，但是在较旧的IE中，除非您声明定义它的XML名称空间，否则它们将无法工作。

验证方面的区别还在于ng-app无效的XHTML，这将导致您的网页无法通过HTML验证。Angular允许您在其指令前加上data-或x-使其进行验证。

— abject_error
source

仅当您使用“ ng：”时，这才看起来是正确的。我相信“ data-ng-”应该验证。

— Chuck Le Butt 2014年

4

如果要使页面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>

— Vahap Gencdal
source

您能否解释一下为什么第一种情况会引发错误？

— 阿瓦尼

这是指w3c验证。

— Graham P Heath

3

这两个术语的基本区别是data-ng-app验证HTML，而后者不验证。功能保持不变。有关更多参考，您可以尝试使用w3Validator。

— 阿比舍克·加卡（Abhishek Gakhar）
source

-2

两者之间绝对没有区别，除了某些HTML5验证程序会在ng-app之类的属性上引发错误，但不会对以data-开头的任何内容（例如data-ng-app）引发错误。因此，将data-prefix与我们的angular指令一起使用是很好的。

即使您可以通过以下提到的方式使用Angular指令ng-bind，ng：bind，ng_bind，data-ng-bind，x-ng-bind

— 拉杰国王
source