Question

我目前正在angular.js查看ng-app

在某个时刻（12'40“之后），发言者声明data-ng-app=""和<html>属性在ng-model="my_data_binding标记内或多或少相同，因此{{} 1}}和data-ng-model="my_data_binding"。然而，发言人说html将通过不同的验证器进行验证，具体取决于使用的属性。

你能否解释两种方式之间的区别，ng-前缀与data-ng-前缀？

Answer 1

好问题。区别很简单 - 两个除了之间没有什么区别，某些HTML5验证器会在ng-app之类的属性上抛出错误，但它们不会为任何前缀的错误抛出错误使用data-，例如data-ng-app。

因此，要回答您的问题，请使用data-ng-app，以便更轻松地验证您的HTML。

有趣的事实：你也可以使用x-ng-app来达到同样的效果。

Answer 2

来自Angularjs Documentation

Angular规范化元素的标记和属性名称以确定   哪些元素匹配哪些指令。我们通常会提到   它们区分大小写的camelCase规范化名称的指令（例如   ngModel）。但是，由于HTML不区分大小写，我们参考   DOM中的指令通过小写形式，通常使用   DOM元素上的破折号分隔属性（例如ng-model）。

规范化过程如下：

从元素/属性的前面剥离x-和data-。将：， - 或_分隔的名称转换为camelCase。这里有一些等价物   与ngBind相匹配的元素示例：

基于以上声明，所有都是有效的指令

<强> 1。 ng-bind
2. ng：bind
3. ng_bind
4. data-ng-bind
5. x-ng-bind

Answer 3

不同之处在于自定义data-*属性在HTML5 specification中有效。因此，如果您需要验证标记，则应使用它们而不是ng属性。

Answer 4

简答：

ng-model和data-ng-model相同且相同！

为什么？

原因： data-前缀
HTML5 specification期望任何自定义属性都以data-为前缀。
原因： ng-model和data-ng-model相同且等效。

AngularJS Document - Normalization

  Angular规范化元素的标记和属性名称，以确定哪些元素与哪些指令匹配。我们通常通过其区分大小写的camelCase规范化名称（例如ngModel）来引用指令。但是，由于HTML不区分大小写，我们通过小写形式引用DOM中的指令，通常在DOM元素上使用dash-delimited属性（例如ng-model）。

  规范化过程如下：
  1.从元素/属性的前面剥离x-和data-。
  2.将:，-或_ - 分隔名称转换为camelCase。

  例如
  以下表格都是等效的，并与ngBind指令匹配：

<div ng-controller="Controller">
  Hello <input ng-model='name'> <hr/>
  <span ng-bind="name"></span> <br/>
  <span ng:bind="name"></span> <br/>
  <span ng_bind="name"></span> <br/>
  <span data-ng-bind="name"></span> <br/>
  <span x-ng-bind="name"></span> <br/>
</div>

Answer 5

如果您想让页面HTML有效，您可以使用数据ng-而不是ng-。

Answer 6

如果您想在服务器上操作html或html片段，然后再将其提供给浏览器，那么您肯定希望使用data-ng-xxx属性而不仅仅是ng-xxx属性。

它使你的html有效，这意味着它可以被domdocument（php）或其他的html（基于服务器）解析器使用。这些解析器通常在没有良好形成的html上失败。
Angular规范化属性，但请记住，这是在客户端上，而不是在服务器上。

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

6 个答案:

简答：

为什么？