0

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.

Mr Singh
  • 3,936
  • 5
  • 41
  • 60
Khan M
  • 415
  • 3
  • 17
  • simply No difference – Syed mohamed aladeen Jun 25 '19 at 06:42
  • I thought the two are literally the same thing. The `data-` prefix is just to make it compliant with HTML validators. – VLAZ Jun 25 '19 at 06:42
  • Possible duplicate of [What is the difference between ng-app and data-ng-app?](https://stackoverflow.com/questions/16184428/what-is-the-difference-between-ng-app-and-data-ng-app) – Lex Jun 25 '19 at 13:53

4 Answers4

3

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

jsDev
  • 31
  • 2
1

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

georgeawg
  • 48,608
  • 13
  • 72
  • 95
0

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>

Azad
  • 5,144
  • 4
  • 28
  • 56
0
  • 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.
Vinod Bokde
  • 338
  • 2
  • 14