ng-app与data-ng-app有什么区别?


230

目前,我在看这个入门教程视频angular.js

在某一时刻(后12'40" ),扬声器指出的属性ng-appdata-ng-app=""是内部或多于或少于<html>标签等都是ng-model="my_data_bindingdata-ng-model="my_data_binding"。但是发言者说,HTML代码将通过不同的验证验证,这取决于哪个属性用过的。

您能解释一下ng-前缀和data-ng-前缀这两种方式之间的区别吗?


Answers:


403

好问题。区别很简单-两者之间绝对没有区别,只是某些HTML5验证程序将对属性诸如抛出错误ng-app,但对于data-诸如前缀的任何内容都不会引发错误data-ng-app

因此,要回答您的问题,请使用data-ng-app是否希望更轻松地验证HTML。

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


4
数据前缀是否会阻止ng属性正常工作?(例如“ data-ng-repeat”)?
tonejac

3
手动剥离data-和似乎浪费了CPU周期x-。为什么不能将HTML验证规则更改为接受ng-内容?
DaveAlger 2015年


1
@DaveAlger:像你说的那样做是一个坏主意。如果外面有很多著名的工具(如Angular)带有不同的前缀,那么您希望HTML跟随它们全部添加其前缀?!?!。正如Krumia所说,这是扩展HTML的方法。
Dassi Orleando '16

65

Angularjs文档

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


但这只是为了与指令名称进行比较。它不会更改实际属性。
RetroCoder 2014年

3
关于-、:和_表示法的很好的了解
Code Whisperer 2014年

29

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


1
我从规范中了解到data- *可以工作,因为它只是验证html。但是,为什么x- *会起作用?他们在规范中对此没有任何描述。
Bhramar

1
x- *保留供浏览器使用。关于您的WHY x的工作原理,任何一个都可以按角度工作,具体方法是将其编码到其框架中,从而确保它适用于任何一个数据/ x。如果您要问x为什么用角钢加工,那就是另一场辩论。有一个很好的论据。在SO上看到以下答案:stackoverflow.com/a/17902387/339803该页面上的另一个答案似乎认为x是针对XHTML的,但我不确定。阅读全部内容后,看看可以做什么。HTML5规范还指出浏览器/供应商的使用:w3.org/html/wg/drafts/html/master/single-page.html
redfox05

15

简短答案:

ng-modeldata-ng-model相同!


为什么?

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

  2. 原因:这两个ng-modeldata-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>

2

如果要使页面HTML有效,可以使用data-ng-而不是ng-。


2
OP知道它们可以互换使用,但希望知道为什么如果它们“相同”工作时两者可用。我相信,对使它们与众不同的原因进行解释将是更有价值的答案。
查尔斯·沃森

1

如果要在将服务器上的html或html片段提供给浏览器之前对其进行操作,则绝对希望使用data-ng-xxx属性,而不仅仅是ng-xxx属性。

  1. 它使您的html有效,这意味着它可以被domdocument(php)等html(基于服务器)的解析器使用。这些解析器通常在格式不正确的html上失败。
  2. Angular标准化了属性,但请记住,该属性在客户端上,而不在服务器上。
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.