ng-model 和 data-ng-model 的区别答案

【问题标题】：Difference between ng-model and data-ng-modelng-model 和 data-ng-model 的区别
【发布时间】：2014-07-01 10:31:55
【问题描述】：

我是 AngularJs 的新手。谁能说出 ng-model 和 data-ng-model 的区别？

使用 ng-model

First Name  :  <input type="text" ng-model="fname" id="fname">
Second Name :  <input type="text" ng-model="lname" id="lname">

使用 data-ng-model

First Name  :  <input type="text" data-ng-model="fname" id="fname">
Second Name :  <input type="text" data-ng-model="lname" id="lname">

【问题讨论】：

标签： angularjs

【解决方案1】：

虽然ng-model 和data-ng-model 都可以工作，但HTML5 要求任何自定义属性都以data- 为前缀。

<!-- not HTML5 valid -->
<input type="text" ng-model="name">

<!-- HTML5 valid -->
<input type="text" data-ng-model="name">

【讨论】：

【解决方案2】：

它们是一样的。 Angular 从属性中剥离 data- 部分。来自the docs：

Angular对一个元素的标签和属性名进行规范化，以确定哪些元素匹配哪些指令……规范化过程如下：

从元素/属性的前面去除x- 和data-。

将:、- 或_ 分隔的名称转换为camelCase。

【讨论】：

【解决方案3】：

如果从 AngularJs 的角度来看，ng-model 和 data-ng-model 之间没有区别。

实际上，'data' 用作验证 HTML5 验证的前缀。因此，使用data-ng-model 是一种很好的做法，但是，您也可以使用ng-model。这也没有问题。

两者含义相同，输出相同：

使用 ng-model

First Name  :  <input type="text" ng-model="fname" id="fname">
Second Name :  <input type="text" ng-model="lname" id="lname">

使用 data-ng-model

First Name  :  <input type="text" data-ng-model="fname" id="fname">
Second Name :  <input type="text" data-ng-model="lname" id="lname">

【讨论】：

【解决方案4】：

最佳实践：首选使用破折号分隔的格式（例如，ng-bind 用于 ngBind）。 如果您想使用 HTML 验证工具，您可以改用带有数据前缀的版本（例如 ngBind 的 data-ng-bind）。 出于遗留原因，接受上面显示的其他表单，但我们建议你要避开他们。

【讨论】：

你的解释让我很困惑，哪个是最佳实践。只是ng-bind？
你可以同时使用，如果你想让 HTML5 有效属性使用 data-ng-...

【解决方案5】：

sylewester 的回答是正确的，可以在 https://docs.angularjs.org/guide/directive 找到的 AngularJS 指令文档中阅读

（这有助于我理解 sylwester 的回答，所以我想它也可能对其他人有所帮助。）

【讨论】：

【解决方案6】：

sylewester 的回答是正确的，可以在 https://docs.angularjs.org/guide/directive 的 AngularJS 指令文档中阅读。以下是该页面的摘录。

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

归一化过程如下：

从元素/属性的前面去除 x- 和 data-。将 :、- 或 _ 分隔的名称转换为 camelCase。

例如，以下形式都是等价的，并且匹配 ngBind 指令：

（这有助于我理解 sylwester 的回答，所以我想它也可能对其他人有所帮助。）

【讨论】：