Html ng-app vs. data-ng-app,有什么区别?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16589853/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ng-app vs. data-ng-app, what is the difference?
提问by Stephane Rolland
I'm currently looking at this start tutorial videofor angular.js
目前,我在看这个入门教程视频的angular.js
At some moment (after 12'40"), the speaker states that the attributes ng-app
and data-ng-app=""
are more or less equivalent inside the <html>
tag, and so are ng-model="my_data_binding
and data-ng-model="my_data_binding"
. However The speaker says the html would be validated through different validators, depending on which attribute is used.
在某一时刻(后12'40" ),扬声器指出的属性ng-app
和data-ng-app=""
是内部或多于或少于<html>
标签等都是ng-model="my_data_binding
和data-ng-model="my_data_binding"
。但是发言者说,HTML代码将通过不同的验证验证,这取决于哪个属性用过的。
Could you explain the difference between the two ways, ng-
prefix against data-ng-
prefix ?
你能解释一下这两种方式的区别吗,ng-
前缀对data-ng-
前缀?
回答by Code Whisperer
Good question. The difference is simple - there is absolutely no difference between the two exceptthat certain HTML5 validators will throw an error on a property like ng-app
, but they don't throw an error for anything prefixed with data-
, like data-ng-app
.
好问题。区别很简单 - 两者之间绝对没有区别,只是某些 HTML5 验证器会在属性上抛出错误,例如ng-app
,但它们不会对任何以 为前缀的内容抛出错误data-
,例如data-ng-app
。
So to answer your question, use data-ng-app
if you would like validating your HTML to be a bit easier.
因此,要回答您的问题,请使用data-ng-app
if 您希望验证您的 HTML 更容易一些。
Fun fact: You can also use x-ng-app
to the same effect.
有趣的事实:您也可以使用它x-ng-app
来达到相同的效果。
回答by srinu
Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).
The normalization process is as follows:
Strip x- and data- from the front of the element/attributes. Convert the :, -, or _-delimited name to camelCase. Here are some equivalent examples of elements that match ngBind:
Angular 规范化元素的标签和属性名称,以确定哪些元素匹配哪些指令。我们通常通过区分大小写的驼峰命名规范化名称(例如 ngModel)来引用指令。然而,由于 HTML 不区分大小写,我们以小写形式引用 DOM 中的指令,通常在 DOM 元素上使用破折号分隔的属性(例如 ng-model)。
归一化过程如下:
从元素/属性的前面去除 x- 和 data- 。将 :、- 或 _ 分隔的名称转换为驼峰式命名法。以下是与 ngBind 匹配的元素的一些等效示例:
based on above statement below all are valid directives
基于以上声明,下面所有都是有效的指令
1. ng-bind
2. ng:bind
3. ng_bind
4. data-ng-bind
5. x-ng-bind
1. ng-bind
2. ng:bind
3. ng_bind
4. 数据-ng-bind
5. x-ng-bind
回答by Manu Letroll
The differences lies in the fact that custom data-*
attributes are valid in the HTML5 specification. So if you need your markup to be validated, you should use them rather than the ng
attributes.
不同之处在于自定义data-*
属性在HTML5 规范中有效。因此,如果您需要验证您的标记,您应该使用它们而不是ng
属性。
回答by Eddy
Short Answer:
简答:
ng-model
and data-ng-model
are same and equivalent!
ng-model
并且data-ng-model
是相同的和等价的!
Why?
为什么?
reason for:
data-
prefix
HTML5 specificationexpects any custom attribute to be prefixed bydata-
.reason for:both
ng-model
anddata-ng-model
are same and equivalent.
原因:
data-
前缀
HTML5 规范要求任何自定义属性都以data-
.原因:这两个
ng-model
和data-ng-model
相同和等同的。
AngularJS Document - Normalization
Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCasenormalized name (e.g.ngModel
). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimitedattributes on DOM elements (e.g.ng-model
).
The normalization process is as follows:
1. Stripx-
anddata-
from the front of the element/attributes.
2. Convert the:
,-
, or_
-delimited name tocamelCase
.
For example
the following forms are all equivalent and match the ngBind directive:
AngularJS 文档 - 规范化
Angular 规范化元素的标签和属性名称,以确定哪些元素与哪些指令匹配。我们通常通过区分大小写的驼峰命名规范化名称(例如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>
回答by NNaseet
You can use data-ng-, instead of ng-, if you want to make your page HTML valid.
如果您想让您的页面 HTML 有效,您可以使用 data-ng- 而不是 ng-。
回答by Kees Hessels
if you want to manipulate html or html-fragments on your server before serving it to the browser, you most definitely want to be using data-ng-xxx attributes instead of just ng-xxx attributes.
如果您想在将其提供给浏览器之前在您的服务器上操作 html 或 html-fragments,您绝对希望使用 data-ng-xxx 属性而不仅仅是 ng-xxx 属性。
- It makes your html valid, meaning it can be used by html (server based) parsers like domdocument (php) or others. These parsers often fail on not well formed html.
- Angular normalizes the attribute, but remember, that's on the client, not on the server.
- 它使您的 html 有效,这意味着它可以被 html(基于服务器)解析器使用,如 domdocument (php) 或其他解析器。这些解析器经常在格式不正确的 html 上失败。
- Angular 规范了属性,但请记住,这是在客户端上,而不是在服务器上。