ng-app vs. data-ng-app, в чем разница?

В настоящее время я смотрю на это начальное учебное видео для angular.js

В какой-то момент (после 12’40 “) динамик заявляет, что атрибуты ng-app и data-ng-app="" более или менее эквивалентны внутри , а также ng-model="my_data_binding и data-ng-model="my_data_binding" . Однако говорящий говорит, что html будет проверяться с помощью различных валидаторов, в зависимости от того, какой атрибут используется.

Не могли бы вы объяснить разницу между двумя способами: ng- префикс против префикса data-ng- ?

Хороший вопрос. Разница проста: между ними нет никакой разницы, за исключением того, что некоторые валидаторы HTML5 будут вызывать ошибку на свойстве, таком как ng-app , но они не выдают ошибку ни за что с префиксом data- , как data-ng-app .

Поэтому, чтобы ответить на ваш вопрос, используйте data-ng-app если вы хотите, чтобы проверка вашего HTML была немного проще.

Интересный факт. Вы также можете использовать x-ng-app для того же эффекта.

Из документации Angularjs

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

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

Стрите x- и данные – с передней части элемента / атрибутов. Преобразуйте имя:, – или _-delimited в camelCase. Вот несколько эквивалентных примеров элементов, которые соответствуют ngBind:

основанные на приведенном выше описании ниже, являются действительными директивами

1. ng-bind
2. ng: bind
3. ng_bind
4. data-ng-bind
5. x-ng-bind

Различия заключаются в том, что пользовательские атрибуты data-* действительны в спецификации HTML5 . Поэтому, если вам нужна ваша разметка для проверки, вы должны использовать их, а не атрибуты ng .

Короткий ответ:

ng-model и data-ng-model являются одинаковыми и эквивалентными!


Зачем?

  1. причина для: префикса data-
    Спецификация HTML5 предполагает, что какой-либо пользовательский атрибут будет префиксными data- .

  2. причина для: и ng-model и data-ng-model одинаковы и эквивалентны.

Документ AngularJS – нормализация

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

Процесс нормализации выглядит следующим образом:
1. Стрите x- и данные – с фронта элемента / атрибутов.
2. Преобразуйте имя : - , или _ -delimited в camelCase .

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

 
Hello





Вы можете использовать data-ng-, а не ng-, если вы хотите сделать свой HTML-код действительным.

если вы хотите манипулировать html или html-fragmentами на своем сервере, прежде чем отправлять их в браузер, вы определенно хотите использовать атрибуты data-ng-xxx вместо атрибутов ng-xxx.

  1. Это делает ваш html действительным, то есть он может использоваться анализаторами html (на сервере), такими как domdocument (php) или другими. Эти парсеры часто терпят неудачу на плохо сформированном html.
  2. Угловая нормализует атрибут, но помните, что это на клиенте, а не на сервере.
  • Отключить проверку элементов формы HTML5
  • HTML5 включает файл
  • Dropdownlistfor не отобразит правильный выбор
  • Как изменить изображение с помощью canvasа HTML5?
  • Холст HTML5 - Заполнить круг с изображением
  • Как использовать tags и в HTML5?
  • Можете ли вы вызвать ko.applyBindings, чтобы связать частичный просмотр?
  • Почему изменения в jQuery $ .fn.data () не изменяют соответствующие атрибуты html 5 data- *?
  • Как стиль ввода диапазона HTML5 имеет различный цвет до и после слайдера?
  • Встроенное видео Youtube: функция автозапуска не работает в iphone
  • В чем разница между localStorage, sessionStorage, сеансом и куки?
  • Interesting Posts
    Давайте будем гением компьютера.