What is the difference between ng-app and data-ng-

2019-01-02 20:41发布

站内文章 / 前端开发
21 0 0

问题:

I have begun to learn about AngularJS and am confused about what the differences are between the ng-app and data-ng-app directives.

回答1:

Most of these answers are simply saying makes template valid HTML, or HTML Validator Compliant, without explaining what THOSE terms mean, either.

I do not know for sure, but I'm guessing that these terms apply to HTML validation programs that scan your code for standards compliance - kind of like lint. They do not recognize ng-app as a valid attribute. They expect non default HTML attributes to be prefaced with

data-attribute_name_here.

So, the creators of AngularJS have created alternate names for their directives that include the data- in front of them so that HTML validator programs will "like" them.



回答2:

None in terms of the runtime behavior, those are just different styles of naming directives as described here: http://docs.angularjs.org/guide/directive

Directives have camel cased names such as ngBind. The directive can be invoked by translating the camel case name into snake case with these special characters :, -, or _. Optionally the directive can be prefixed with x-, or data- to make it HTML validator compliant. Here is a list of some of the possible directive names: ng:bind, ng-bind, ng_bind, x-ng-bind and data-ng-bind.

As you can see from reading this the data- can be used to make your HTML pass HTML validator tests/



回答3:

You can declare the angular namespace <html xmlns:ng="http://angularjs.org" ng-app>



回答4:

In modern browsers there is no difference, but in older IEs, they won't work unless you declare an XML namespace defining it.

There is also a validation difference in that ng-app is not valid XHTML, and will cause your webpage to fail HTML validations. Angular allows you to prefix its directives with data- or x- to allow it to validate.



回答5:

You can use data-ng-, instead of ng-, if you want to make your page HTML valid.
This will throw an error

<div ng-app="">

  <p>Input something in the input box:</p>
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>

</div>

This won't throw an error

<div data-ng-app="scope" data-ng-init="name='test'">

  <p>Input something in the input box:</p>
  <p>Name: <input type="text" data-ng-model="name"></p>
  <p data-ng-bind="name"></p>

</div>


回答6:

The basic difference between these two terms is that data-ng-app validates the HTML while the latter don't.Functionality remains the same. For more reference you can try w3Validator.



回答7:

Absolutely there is no difference between the two, except that 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. So using data- prefix with our angular directives is good.

Even you can make use angular directives in below mentioned ways ng-bind, ng:bind, ng_bind, data-ng-bind, x-ng-bind



标签：
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~