НГ-приложение против данных-НГ-приложение, в чем разница?

230

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

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

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

html angularjs Стефан Роллан
источник
2
Возможный дубликат В чем разница между ng-app и data-ng-app?
Боб Джарвис - Восстановить Монику

Ответы:

403

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

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

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

Код Whisperer
источник
4
Будет ли префикс данных когда-либо препятствовать правильной работе атрибута ng? (например, «data-ng-repeat»)?
tonjac
3
Кажется, что такая пустая трата циклов процессора, чтобы вручную снять data-и x-. Почему нельзя изменить правила проверки HTML, чтобы принимать ng-вещи?
DaveAlger
8
@DaveAlger: data-*атрибуты - это способ расширить HTML .
Сампатрисрис
1
@DaveAlger: Это плохая идея, как ты сказал. Если есть много известных инструментов, таких как Angular, с другим префиксом, вы хотите, чтобы HTML следовал за ними, чтобы добавить их префикс?!?! Как сказал Крумия, это способ расширить HTML.
Дасси Орлеандо
65

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

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

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

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

на основе приведенного выше утверждения все действующие директивы

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

srinu
источник
Но это делается только для сравнения с именем директивы. Это не меняет фактический атрибут.
RetroCoder
3
Полезно знать о нотации - ,: и _
Code Whisperer
29

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

Ману Летролл
источник
1
Из спецификации я понимаю, что data- * будет работать, поскольку он только проверяет HTML. Но тогда почему x- * работает? их нет в описании в описании.
Бхрамар
1
x- * зарезервирован для использования браузером. Что касается вашего вопроса о том, ПОЧЕМУ x работает, то любой из них будет работать как angular, в частности, проверяет, работает ли он для данных / x, кодируя его в своей структуре. Если вы спрашиваете, ПОЧЕМУ x работает для угловых, это еще одна дискуссия. Есть хорошие аргументы для обоих. Смотрите этот ответ на SO: stackoverflow.com/a/17902387/339803 Другой ответ на этой странице, кажется, думает, что x для XHTML, но я не уверен. Посмотрите, что вы можете сделать из этого после прочтения всего этого. Спецификация
redfox05
15

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

ng-modelи data-ng-modelтакие же и эквивалентные!

Зачем?

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

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

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

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

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

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

<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>
Эдди
источник
2

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

NNaseet
источник
2
ФП понимает, что их можно использовать взаимозаменяемо, но хочет знать, почему они доступны, если они работают «одинаково». Я считаю, что объяснение того, что отличает их, было бы более ценным ответом.
Чарльз Уотсон
1

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

  1. Это делает ваш html действительным, что означает, что он может использоваться html (на основе сервера) парсерами, такими как domdocument (php) или другими Эти парсеры часто терпят неудачу на плохо сформированном html.
  2. Angular нормализует атрибут, но помните, что это на клиенте, а не на сервере.
Кис Хессельс
источник