Difference between data-ng-model and ng-model in AngularJS




Asked on April 14, 2016
What is difference between data-ng-model and ng-model and in AngularJS?


Replied on April 15, 2016

HTML 5 has introduced data attribute. With the prefix of data- we can create custom data attributes such as


<div id="info" data-user-name="Ram" data-user-city="Varanasi"></div>


In JavaScript and and CSS, we can access these values with attribute names data-user-name and data-user-city.  In JavaScript, we access as follows.

 

var info= document.getElementById("info");

var name = info.getAttribute("data-user-name");

var city = info.getAttribute("data-user-city");

 

In jQuery,  we can ignore data- prefix


var info = $("#info");

var name = info.data("user-name");

var city = info.data("user-city");

 

1. In HTML 5 data-* attributes are used to store private data which gives no HTML validation error. 

2. Search engines ignore these attributes. 


3. AngularJS has custom attributes like  ng-app, ng-controller, ng-model. To get the advantage of HTML 5 data- attribute, we can prefix AngularJS attributes such as data-ng-app, data-ng-controller, data-ng-model.


4. For AngularJS there is no difference between ng-app and data-ng-app or ng-controller and data-ng-controller or ng-model and data-ng-model because while compiling HTML page, AngularJS strips data- or x- prefix. Find the URL for reference.


5. For AngularJS there is no difference between the below lines


    <input ng-model="user.name" /> 

    and

   <input data-ng-model="user.name" />


But data-ng-model is HTML 5 compatible.

 

 

 




Replied on April 15, 2016
Good Explanation. Thanks.

Write Answer










©2024 concretepage.com | Privacy Policy | Contact Us