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

【问题标题】：What is the difference between ng-app and data-ng-app?ng-app 和 data-ng-app 有什么区别？
【发布时间】：2013-04-17 13:23:11
【问题描述】：

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

【问题讨论】：

ng-app vs. data-ng-app, what is the difference? 的可能重复项
@chenrui - 顺便说一句，这个 Q 最先出现。（4 月 24 日对 5 月 16 日）
您的应用程序不会受到影响，即使您使用 ng-app 或 data-ng-app，Angular 也会按预期工作，但正如 @user2289659 所述，使用 data-* 引入了自定义属性从 HTML5 开始的标准

标签： angularjs angularjs-directive

【解决方案1】：

这些答案中的大多数只是简单地说 使模板有效 HTML 或 HTML Validator Compliant，而没有解释这些术语的含义。

我不确定，但我猜这些术语适用于 HTML 验证程序，用于扫描您的代码以符合标准 - 有点像 lint。他们不将ng-app 识别为有效属性。他们希望非默认 HTML 属性以

开头

data-attribute_name_here。

因此，AngularJS 的创建者为其指令创建了替代名称，其中包括前面的 data-，以便 HTML 验证器程序“喜欢”它们。

【讨论】：

+1 表示“好的。那么，'验证器兼容'是什么意思呢？”方法。如果您进行了研究，您会发现您的猜测大多是正确的。 =)
有效 HTML 不适用于 HTML 验证器。浏览器解析 HTML。如果您开始偏离 HTML 规范，则无法保证您的 HTML 将被正确解析。
是的，验证器是达到目的的手段。目标是使您的网页尽可能接近规范，从而最大限度地增加浏览器的数量 - 旧的、现在的和未来的 - 您的应用程序实际上可以在其中按预期工作。在“data-*”的情况下，浏览器也有可能引入与标准相同的属性，这会与您的应用程序的属性发生冲突。此外，坚持这样的标准将有助于工具（例如编辑器）理解它并使它们对您更有用。
@Blender “无法保证您的 HTML 将被正确解析”，对于有效的 HTML 也是如此。
@Chuck 我并不是建议您以一种或另一种方式来做，只是这个问题并不是特别重要。我们也可以在讨论空格和制表符时进行辩论。哈哈

【解决方案2】：

就运行时行为而言，它们只是不同风格的命名指令，如下所述：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 验证器测试/

【讨论】：

HTML 规范在哪里允许这样做？
@user1876508: w3.org/TR/2011/WD-html5-20110525/…

【解决方案3】：

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

【讨论】：

这似乎只适用于旧版应用程序：“如果您选择使用旧式指令语法 ng: 则在 html 中包含 xml-namespace 以使 IE 满意。（这是出于历史原因在这里，并且我们不再推荐使用 ng:.)”。来源：docs.angularjs.org/guide/bootstrap

【解决方案4】：

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

还有一个验证区别在于ng-app 不是有效的 XHTML，并且会导致您的网页无法通过 HTML 验证。 Angular 允许您在其指令前加上 data- 或 x- 以允许它进行验证。

【讨论】：

这似乎只有在您使用“ng:”时才成立。我相信“data-ng-”应该验证。

【解决方案5】：

如果你想让你的页面 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>

【讨论】：

您能解释一下为什么第一个场景会抛出错误吗？
这是引用 w3c 验证。

【解决方案6】：

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

【讨论】：

【解决方案7】：

两者之间绝对没有区别，除了某些 HTML5 验证器会在 ng-app 之类的属性上抛出错误，但它们不会对任何以 data- 为前缀的东西抛出错误，例如 data-ng-app .所以在我们的角度指令中使用 data- 前缀是很好的。

即使你可以通过下面提到的方式使用角度指令 ng-bind, ng:bind, ng_bind, data-ng-bind, x-ng-bind

【讨论】：