ng-model和data-ng-model之间的区别

I am new with the AngularJs. Can anyone say the difference between ng-model and data-ng-model?

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

With ng-model

使用ng-model

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

With data-ng-model

使用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 个解决方案

#1

Best Practice: Prefer using the dash-delimited format (e.g. ng-bind for ngBind). If you want to use an HTML validating tool, you can instead use the data-prefixed version (e.g. data-ng-bind for ngBind). The other forms shown above are accepted for legacy reasons but we advise you to avoid them.

最佳实践：首选使用以划线分隔的格式（例如ng-bind用于ngBind）。如果要使用HTML验证工具，则可以使用数据前缀版本（例如，ngBind的data-ng-bind）。上面显示的其他表单因遗留原因而被接受，但我们建议您避免使用它们。

#2

while both ng-model and data-ng-model would work, HTML5 expects any custom attribute to be prefixed by data-.

虽然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">

#3

They are the same. Angular strips the data- part from the attribute. From the docs:

他们是一样的。 Angular从属性中剥离数据部分。来自文档：

Angular normalizes an element's tag and attribute name to determine which elements match which directives... The normalization process is as follows:

Angular规范化元素的标记和属性名称以确定哪些元素与哪些指令匹配...规范化过程如下：

1. Strip x- and data- from the front of the element/attributes.
2. 从元素/属性的前面剥离x-和数据。
3. Convert the :, -, or _-delimited name to camelCase.
4. 将：， - 或_分隔的名称转换为camelCase。

#4

There is no difference between ng-model and data-ng-model.

ng-model和data-ng-model之间没有区别。

Actually, 'data' used as prefix to validate HTML5 validation. So, it is good practice to use data-ng-model, however, you can use ng-model as well. There is no problem in that also.

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

Both have the same meaning and both have the same output:

两者具有相同的含义，并且都具有相同的输出：

With ng-model

使用ng-model

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

With data-ng-model

使用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">