AngularJS - Difference between ng-grid and data-ng-grid

Question

I created a ASP.NET MVC 4 project using AngularJS template available for VS2012. In one of the pages, the grid is coded in html like

<div class="grid-style" data-ng-grid="userGrid">
</div>

But while searching for a problem with the grid, I see people use like

<div class="grid-style" ng-grid="userGrid">
</div>

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

Stocks

Answer 1

Although there's already an answer marked correct for this question, it's worth noting that it's not about browser support - it's that data attributes are actually defined in the XHTML and HTML specs and as such are valid markup. It's good practice to use data-ng-*, but this isn't due to browser compliance; it's for validation. (In the case of HTML, valid markup is preferred. In the case of XHTML, valid markup is vital or the page will break.)

.NET HTML markup will use data-ng attribute so that it produces HTML markup that will pass validation rules. Again, this is much more important for XHTML, but still important for HTML.

Silvereye

Answer 2

They are effectively the same thing in terms of angularjs. The data prefix for custom attributes is more widely supported by browsers. You can also use the class version for directives, which is more widely supported, as below.

<div class="ng-grid=userGrid">
</div>

Pyrophoric

It's not to do with browser support. All browsers allow for custom attributes, but they are not considered standard HTML. The data prefix was added to the HTML spec to mark your own custom attributes and make the HTML valid. The optional Angular markup using data is simply to make your HTML validate. – Greyhound