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

Question

我是 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">  

Answer 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">

Answer 2

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

  

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

     

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

Answer 3

如果你看到AngularJs，ng-model和data-ng-model之间没有区别。

实际上，＆＃39; 数据＆＃39;用作验证 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">  

Answer 4

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