我现在正在看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-前缀这两种方式的区别吗?
当前回答
来自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:
基于上述陈述,以下所有指令都是有效的
1. ng-bind 2. 吴:绑定 3.ng_bind 4. data-ng-bind 5. x-ng-bind
其他回答
简短的回答:
Ng-model和data-ng-model是相同和等价的!
Why?
原因:数据前缀 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 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: 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:
<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>
来自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:
基于上述陈述,以下所有指令都是有效的
1. ng-bind 2. 吴:绑定 3.ng_bind 4. data-ng-bind 5. x-ng-bind
区别在于自定义data-*属性在HTML5规范中是有效的。因此,如果您需要验证标记,您应该使用它们而不是ng属性。
如果您希望在将HTML或HTML片段提供给浏览器之前在服务器上操作它,那么您肯定希望使用data-ng-xxx属性,而不仅仅是ng-xxx属性。
它使你的html有效,这意味着它可以被html(基于服务器的)解析器使用,如domdocument (php)或其他。这些解析器经常在格式不佳的html上失败。 Angular规范化了这个属性,但请记住,这是在客户端,而不是在服务器端。
好问题。区别很简单——除了某些HTML5验证器会在像ng-app这样的属性上抛出错误外,两者之间绝对没有区别,但它们不会对任何以data-为前缀的属性抛出错误,比如data-ng-app。
所以为了回答你的问题,如果你想验证你的HTML更容易一点,使用data-ng-app。
有趣的事实:你也可以使用x-ng-app达到同样的效果。