ng-app против data-ng-app, в чем разница?

в настоящее время я смотрю на это начало учебное видео на 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- префикс ?

6 ответов


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

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

забавный факт: вы также можете использовать x-ng-app к тому же эффекту.


с Документация Angularjs

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

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

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

на основе вышеуказанного заявления ниже всех действительны директивы

1. ng-bind
2. НГ:обязать
3. ng_bind
4. data-ng-bind
5. x-ng-bind


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


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

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. Преобразовать :, - или_запятыми имя 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>

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


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

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