ng-app 和 data-ng-app 有啥区别？
Posted
技术标签:
【中文标题】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 开始的标准 【参考方案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
【讨论】：
以上是关于ng-app 和 data-ng-app 有啥区别？的主要内容，如果未能解决你的问题，请参考以下文章