ng-app vs data-ng-app, в чому різниця?

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-додатком та data-ng-app?

— Боб Джарвіс - Відновіть Моніку

403

Гарне питання. Різниця проста - різниці між цими двома абсолютно немає, за винятком того, що певні валідатори HTML5 видадуть помилку на властивість на зразок ng-app, але вони не видають помилку для будь-якого, що має префікс data-, наприклад data-ng-app.

Отже, щоб відповісти на ваше запитання, використовуйте, data-ng-appякщо хочете, щоб перевірка HTML була трохи простішою.

Веселий факт: Ви також можете використовувати x-ng-appтой же ефект.

— Шепіт коду
джерело

4

Чи може префікс даних коли-небудь заважати атрибуту ng працювати належним чином? (наприклад, "data-ng-повторення")?

— tonejac

3

Здається, така трата циклів процесора вручну знімати data-та x-. Чому не можна змінити правила перевірки HTML для прийняття ng-матеріалів?

— DaveAlger

8

@DaveAlger: data-*атрибути - це спосіб розширення HTML .

— sampathsris

1

@DaveAlger: Це погана ідея зробити так, як ви сказали. Якщо є багато відомих інструментів, як Angular там, з різними префіксами, ви хочете, щоб HTML дотримувався їх усіх, щоб додати їх префікс?!?! Як сказав Крумія, це спосіб розширення HTML.

— Дассі Орлеандо

65

З документації Angularjs

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

Процес нормалізації такий:

Стрипіть x- та data- з передньої частини елемента / атрибутів. Перетворіть:, -, або _-обмежене ім'я в camelCase. Ось кілька еквівалентних прикладів елементів, які відповідають ngBind:

На підставі вищезазначеного твердження нижче всі є чинними директивами

1. ng-прив’язати
2. ng: прив’язати
3. ng_bind
4. дані-ng-прив’язати
5. x-ng-прив’язати

— сріну
джерело

Але це робиться лише для порівняння з назвою директиви. Це не змінює фактичний атрибут.

— RetroCoder

3

Приємно знати про позначення - ,: та _

— Шепітер коду

29

Відмінність полягає в тому, що спеціальні data-*атрибути дійсні в специфікації HTML5 . Тож якщо вам потрібна перевірка розмітки, слід використовувати їх, а не ngатрибути.

— Ману Летролл
джерело

1

З специфікації я розумію, що дані- * будуть працювати, оскільки вони просто перевіряють html. Але тоді чому x- * працювати? їх опису в специфікації немає.

— Бхрамар

1

x- * зарезервовано для використання в браузері. Що стосується вашого питання ЧОМУ x працює, то будь-який буде працювати як кутовий, спеціально переконайтеся, що він працює для будь-яких даних / x, кодуючи їх у свої рамки. Якщо ви запитуєте, ЧОМУ x працює на кутовий, то це ще одна дискусія. Є і хороші аргументи для будь-якого. Дивіться цю відповідь на SO: stackoverflow.com/a/17902387/339803 Інша відповідь на цій сторінці, здається, вважає, що x призначений для XHTML, але я не впевнений. Дивіться, що ви можете зробити з цього, прочитавши все це. Специфікація HTML5 також говорить про використання браузера / постачальника: w3.org/html/wg/drafts/html/master/single-page.html

— redfox05

15

Коротка відповідь:

ng-modelі data-ng-modelтакі самі і рівнозначні!

Чому?

Причина: специфікаціяdata- префіксу
HTML5 очікує, що будь-який спеціальний атрибут має бути префіксом data-.
Причина: і те, ng-modelі те data-ng-modelсаме і рівнозначно.

AngularJS Document - Нормалізація

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.

Це робить ваш HTML дійсним, тобто він може бути використаний html (серверними) аналізаторами, такими як domdocument (php) або інші. Ці парсери часто виходять з ладу на не добре сформованому HTML.
Angular нормалізує атрибут, але пам’ятайте, що це на клієнті, а не на сервері.

— Кіс Гесселс
джерело