233

我目前正在看这个入门教程视频angular.js

在某个时刻（在 12'40" 之后），演讲者指出标签内的属性ng-app和data-ng-app=""或多或少是等效的，而和也是如此。但是演讲者说 html 将通过不同的验证器进行验证，具体取决于哪个属性是用过的。<html>ng-model="my_data_bindingdata-ng-model="my_data_binding"

你能解释一下这两种方式之间的区别吗，ng-前缀对data-ng-前缀？

4

6 回答 6

407

好问题。区别很简单——两者之间绝对没有区别，只是某些 HTML5 验证器会在属性上抛出错误ng-app，但它们不会对任何前缀为 的东西抛出错误data-，比如data-ng-app.

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

有趣的事实：您也可以使用x-ng-app相同的效果。

于 2013-05-16T14:18:19.250 回答
65

来自Angularjs 文档

Angular 对元素的标签和属性名称进行规范化，以确定哪些元素与哪些指令匹配。我们通常通过区分大小写的驼峰式规范化名称（例如 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

于 2014-06-20T20:32:57.967 回答
29

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

于 2013-05-16T14:18:46.603 回答
15

简短的回答：

ng-model并且data-ng-model是相同的和等价的！

为什么？

  1. 原因： data-前缀
    HTML5 规范要求任何自定义属性都以data-.

  2. 理由：两者ng-model和data-ng-model相同且等价。

AngularJS 文档 - 规范化

Angular 规范化元素的标签和属性名称，以确定哪些元素匹配哪些指令。我们通常通过区分大小写的驼峰式规范化名称（例如ngModel）来引用指令。然而，由于 HTML 不区分大小写，我们在 DOM 中以小写形式引用指令，通常在 DOM 元素上使用破折号分隔的属性（例如ng-model）。

规范化过程如下： 1.从元素/属性的前面
剥离x-和。 2. 将、或- 分隔的名称转换为. 例如data-
:-_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>
于 2016-03-31T08:25:12.733 回答
2

如果要使页面 HTML 有效，可以使用 data-ng- 而不是 ng-。

于 2016-05-21T12:42:04.050 回答
1

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

  1. 它使您的 html 有效，这意味着它可以被 html（基于服务器的）解析器使用，例如 domdocument (php) 或其他。这些解析器经常在格式不正确的 html 上失​​败。
  2. Angular 对属性进行规范化，但请记住，这是在客户端上，而不是在服务器上。
于 2017-01-04T21:20:46.087 回答