Блог

Я новичок в AngularJS. Кто-нибудь может сказать, в чем разница между ng-model и data-ng-model?

С помощью ng-model

 First Name  :  <input type="text" ng-model="fname" id="fname">
Second Name :  <input type="text" ng-model="lname" id="lname">  
  

С помощью data-ng-model

 First Name  :  <input type="text" data-ng-model="fname" id="fname">
Second Name :  <input type="text" data-ng-model="lname" id="lname">  
  

хотя оба ng-model и data-ng-model будут работать, HTML5 ожидает, что любой пользовательский атрибут будет иметь префикс data- .

 <!-- not HTML5 valid -->
<input type="text" ng-model="name">

<!-- HTML5 valid -->
<input type="text" data-ng-model="name">
  

Они одинаковы. Angular удаляет data- часть из атрибута. Из документов:

Angular нормализует тег элемента и имя атрибута, чтобы определить, какие элементы соответствуют директивам… Процесс нормализации заключается в следующем:

1. Разделите x- и data- перед элементом / атрибутами.
2. Преобразуйте : , - или _ имя с разделителями в camelCase .

Между ng-model и data-ng-model нет разницы, если смотреть с точки зрения AngularJS.

На самом деле, ‘данные‘ используются в качестве префикса для проверки валидации HTML5. Таким образом, это хорошая практика для использования data-ng-model , однако вы также можете использовать ng-model . В этом также нет проблем.

Оба имеют одинаковое значение и оба имеют одинаковый результат:

С помощью ng-model

 First Name  :  <input type="text" ng-model="fname" id="fname">
Second Name :  <input type="text" ng-model="lname" id="lname">  
  

С помощью data-ng-model

 First Name  :  <input type="text" data-ng-model="fname" id="fname">
Second Name :  <input type="text" data-ng-model="lname" id="lname">  
  

Лучшая практика: предпочитайте использовать формат, разделенный тире (например, ng-bind для ngBind). Если вы хотите использовать инструмент проверки HTML, вы можете вместо этого использовать версию с префиксом данных (например, data-ng-bind для ngBind). Другие формы, показанные выше, принимаются по устаревшим причинам, но мы советуем вам избегать их.

ответ sylewester правильный и может быть прочитан в документации по директиве AngularJS, найденной по адресуhttps://docs.angularjs.org/guide/directive

(это помогло мне понять ответ Сильвестра, поэтому я подумал, что это может помочь и другим.)

ответ sylewester правильный и может быть прочитан в документации по директиве AngularJS, найденной по адресуhttps://docs.angularjs.org/guide/directive. Ниже приведен отрывок с этой страницы.

AngularJS нормализует тег элемента и имя атрибута, чтобы определить, какие элементы соответствуют директивам. Обычно мы ссылаемся на директивы по их нормализованному имени camelCase с учетом регистра (например, ngModel). Однако, поскольку HTML не чувствителен к регистру, мы ссылаемся на директивы в DOM строчными формами, обычно используя атрибуты, разделенные тире, в элементах DOM (например, ng-model).

Процесс нормализации заключается в следующем:

Удалите x- и data- из передней части элемента / атрибутов. Преобразуйте имя с разделителями :, — или _ в camelCase.

Например, все следующие формы эквивалентны и соответствуют директиве ngBind:

(это помогло мне понять ответ Сильвестра, поэтому я подумал, что это может помочь и другим.)