CODEWITHSUNDEEP
javascriptangularjs
Khan M
Khan M

Reputation: 415

What is the difference between `ng-if` and `data-ng-if`

What is the difference between ng-if and data-ng-if ?

They both seem to work in the same way, however i am not able to figure out the difference in them as not much material is available on data-ng-if.

Upvotes: 0

Views: 3242

Answers (4)

georgeawg
georgeawg

Reputation: 48968

They are equivalent. The $compile service links them to the same directive.

From the Docs:

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>

For more informaton, see

Upvotes: 1

Vinod Bokde
Vinod Bokde

Reputation: 338

  • Both are actually one and the same.
  • Both are directives to specify Conditions.
  • You can use ng-if or prefixing ng-if with data- or x- like data-ng-if or x-ng-if.
  • Angular allows prefixing to its directives with data- or x- just for Validation due to "HTML5 validator".
  • Validation means you won't get any Warnings in Problems tab of Eclipse or any IDE that you are using like "Undefined attribute name (ng-model) at Eclipse".
  • You can use data-ng- instead of ng- if you want to make your page HTML valid nothing more than that.
  • The only difference between these two terms is that data-ng-app or x-ng-app validates the HTML while the ng-app didn't.
  • Functionality remains the same.

Upvotes: 0

jsDev
jsDev

Reputation: 31

Technically both are same, but while validating your page W3C validator without defining data- on your custom attribute it will get failed, because W3C validator doesn't know anything about your custom attribute, so you must have to explicitly define data- before your custom attribute and then W3C validator will pass your HTML

Upvotes: 3

Azad
Azad

Reputation: 5274

arbitary attribute HTML 5 has introduced data attribute. With the prefix of data- we can create custom data attributes such as <div id="thediv" data-ng-if="conditino"></div>

Upvotes: 0

Related Questions