目前,我在看这个入门教程视频的angular.js
在某一时刻(后12'40" ),扬声器指出的属性ng-app
和data-ng-app=""
是内部或多于或少于<html>
标签等都是ng-model="my_data_binding
和data-ng-model="my_data_binding"
。但是发言者说,HTML代码将通过不同的验证验证,这取决于哪个属性用过的。
您能解释一下ng-
前缀和data-ng-
前缀这两种方式之间的区别吗?
目前,我在看这个入门教程视频的angular.js
在某一时刻(后12'40" ),扬声器指出的属性ng-app
和data-ng-app=""
是内部或多于或少于<html>
标签等都是ng-model="my_data_binding
和data-ng-model="my_data_binding"
。但是发言者说,HTML代码将通过不同的验证验证,这取决于哪个属性用过的。
您能解释一下ng-
前缀和data-ng-
前缀这两种方式之间的区别吗?
Answers:
好问题。区别很简单-两者之间绝对没有区别,只是某些HTML5验证程序将对属性诸如抛出错误ng-app
,但对于data-
诸如前缀的任何内容都不会引发错误data-ng-app
。
因此,要回答您的问题,请使用data-ng-app
是否希望更轻松地验证HTML。
有趣的事实:您也可以使用x-ng-app
达到相同的效果。
data-
和似乎浪费了CPU周期x-
。为什么不能将HTML验证规则更改为接受ng-
内容?
data-*
属性是扩展HTML的方法。
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
区别在于,自定义data-*
属性在HTML5规范中有效。因此,如果您需要验证标记,则应使用它们而不是ng
属性。
ng-model
并data-ng-model
相同!
原因: data-
前缀
HTML5规范要求任何自定义属性都以作为前缀data-
。
原因:这两个ng-model
和data-ng-model
相同和等同的。
AngularJS文档-规范化
Angular对元素的标签和属性名称进行规范化,以确定哪些元素与哪些指令匹配。我们通常通过区分大小写的camelCase规范化名称(例如ngModel
)来引用指令。但是,由于HTML不区分大小写,因此我们以小写形式引用DOM中的指令,通常在DOM元素(例如)上使用破折号分隔的属性ng-model
。
规范化过程如下:
1.剥离x-
并data-
从元素/属性的前面开始。
2.转换的:
,-
或_
-delimited名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>