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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:26:35  来源:igfitidea点击:

ng-app vs. data-ng-app, what is the difference?

htmlangularjs

提问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-appand data-ng-app=""are more or less equivalent inside the <html>tag, and so are ng-model="my_data_bindingand 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-appdata-ng-app=""是内部或多于或少于<html>标签等都是ng-model="my_data_bindingdata-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-appif you would like validating your HTML to be a bit easier.

因此,要回答您的问题,请使用data-ng-appif 您希望验证您的 HTML 更容易一些。

Fun fact: You can also use x-ng-appto the same effect.

有趣的事实:您也可以使用它x-ng-app来达到相同的效果。

回答by srinu

From Angularjs Documentation

来自Angularjs 文档

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 ngattributes.

不同之处在于自定义data-*属性在HTML5 规范中有效。因此,如果您需要验证您的标记,您应该使用它们而不是ng属性。

回答by Eddy

Short Answer:

简答:

ng-modeland data-ng-modelare same and equivalent!

ng-model并且data-ng-model是相同的和等价的!



Why?

为什么?

  1. reason for:data-prefix
    HTML5 specificationexpects any custom attribute to be prefixed by data-.

  2. reason for:both ng-modeland data-ng-modelare same and equivalent.

  1. 原因:data-前缀
    HTML5 规范要求任何自定义属性都以data-.

  2. 原因:这两个ng-modeldata-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. Strip x-and data-from the front of the element/attributes.
2. Convert the :, -, or_-delimited name to camelCase.

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 属性。

  1. 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.
  2. Angular normalizes the attribute, but remember, that's on the client, not on the server.
  1. 它使您的 html 有效,这意味着它可以被 html(基于服务器)解析器使用,如 domdocument (php) 或其他解析器。这些解析器经常在格式不正确的 html 上失​​败。
  2. Angular 规范了属性,但请记住,这是在客户端上,而不是在服务器上。