AngularJS Директива обмеження від A до E

113

Я працюю в невеликій команді, будую в AngularJS і намагаюся підтримувати деякі основні стандарти та найкращі практики; особливо враховуючи, що ми відносно нові з Angular.

Моє запитання щодо директив. Точніше, restrictваріанти.

Деякі з нас використовують, restrict: 'E'маючи <my-directive></my-directive>в HTML.

Інші користуються restrict: 'A'та мають <div my-directive></div>у html.

Тоді, звичайно, можна використовувати restrict: 'EA'і використовувати будь-яке з перерахованого вище.

На даний момент це не велика справа, хоча, коли цей проект настільки великий, як його буде, я хотів би, щоб хтось дивився на нього, щоб легко зрозуміти, що відбувається.

Чи є плюси чи мінуси атрибутичного чи елементарного способу вчинити?

Чи є якісь підводні камені, про які нам слід знати, якщо вибирати елемент атрибут над атрибутом?

javascript html angularjs

— Даррен Вайнрайт
джерело

100

Відповідно до документації :

Коли я повинен використовувати атрибут проти елемента? Використовуйте елемент, коли ви створюєте компонент, який контролює шаблон. Поширений випадок для цього, коли ви створюєте доменну мову для частин свого шаблону. Використовуйте атрибут, коли ви прикрашаєте існуючий елемент новою функціональністю.

Редагуйте наступний коментар про підводні камені, щоб отримати повну відповідь:

Якщо припустити, що ви створюєте додаток, який повинен працювати в Internet Explorer <= 8, якого підтримка відхилила команда AngularJS з AngularJS 1.3, вам потрібно дотримуватися наступних інструкцій, щоб змусити його працювати: https: //docs.angularjs .org / довідник / тобто

— ngasull
джерело

3

Я читав ці документи, але пропустив цей :) дякую.

— Даррен Уейнрайт

3

Це пояснення не охоплює жодних підводних каменів та плюсів / мінусів.

— Костянтин Крас

Відповідно оновив мою відповідь про підводні камені. Я не згадував плюси та мінуси, тому що думаю, що ми більше говоримо про найкращі практики тут, особливо коли рекомендується та пояснює команда Angular.

— ngasull

1

"Я не згадував плюси та мінуси, тому що думаю, що ми більше говоримо про найкращі практики тут, особливо коли це рекомендує та пояснює команда Angular". так? :)

— Олександр Міллс

169

обмеження призначене для визначення типу директиви, і це може бути A(Attribute), C(Class), E(Element) та M(coMment), припустимо, що назва директиви Doc:

Тип: Використання

А = <div Doc></div>

С = <div class="Doc"></div>

Е = <Doc data="book_data"></Doc>

М = 

— Сейф Тамалла
джерело

2

менш зрозумілий, ніж відповідь @nikunj, але, побачивши їх відповідь, я розумію вашу ...

— Alexander Mills

47

Параметр обмеження зазвичай встановлюється на:

'A' - відповідає лише атрибуту
'E' - відповідає лише імені елемента
'C' - відповідає лише назві класу
'M' - лише відповідні коментарі

Ось посилання на документацію .

— nikunj gandhi
джерело

простий і чистий

— Gaurav_0093

7

Елемент не підтримується в IE8 з поля, ви повинні виконати певну роботу, щоб IE8 приймав власні теги.

Однією з переваг використання атрибута над елементом є те, що ви можете застосувати декілька директив до одного вузла DOM. Це особливо зручно для таких речей, як елементи керування формою, де ви можете виділити, вимкнути або додати мітки тощо з додатковими атрибутами без необхідності загортати елемент у купу тегів.

— Джек Аллан
джерело

5

Однією з підводних каменів, наскільки я знаю, є проблема IE з користувацькими елементами. Як цитується з документів :

3) ви не використовуєте власні теги елементів, наприклад (використовуйте замість версії атрибута)

4) якщо ви використовуєте власні теги елементів, вам потрібно виконати ці кроки, щоб зробити IE 8 і нижче

<!doctype html>
  <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
    <head>
      <!--[if lte IE 8]>
        <script>
          document.createElement('ng-include');
          document.createElement('ng-pluralize');
          document.createElement('ng-view');

          // Optionally these for CSS
          document.createElement('ng:include');
          document.createElement('ng:pluralize');
          document.createElement('ng:view');
        </script>
      <![endif]-->
    </head>
    <body>
      ...
    </body>
  </html>

— Хан Т.О.
джерело

4

Падіння:

Використання власного html-елемента, наприклад, <my-directive></my-directive>робота над IE8 без вирішення проблеми ( https://docs.angularjs.org/guide/ie )
Використання власних елементів HTML призведе до невдачі перевірки html.
Директиви з рівним одним параметром можна зробити так:

<div data-my-directive="ValueOfTheFirstParameter"></div>

Замість цього:

<my-directive my-param="ValueOfTheFirstParameter"></my-directive>

Ми не використовуємо користувальницькі елементи html, тому що якщо це два факти.

Кожна директива третьої сторони може бути написана двома способами:

<my-directive></my-directive>

або

<div data-my-directive></div>

робить те саме.

— Костянтин Крас
джерело

1

якщо ви хочете створити директиву з рівним 1 параметром області, простіше зробити це з А. Тому що вам не потрібно створювати додатковий атрибут.

— Костянтин Крас

Що ви маєте на увазі під додатковим? Обидві альтернативи мають рівно один атрибут.

— кращий олівер

3

2 проблеми з елементами:

Погана підтримка старих браузерів.
SEO - двигун Google їм не подобається.

Використовуйте атрибути.

— Амір Попович
джерело

Директиви як елементи можуть викликати проблеми SEO? Я здивований. А як щодо replaceатрибута true?

— chalasr

1

На ці претензії потрібні посилання. Пункт 1 досить добре встановлений в інших місцях, але я хотів би побачити джерела про пункт 2.

— rinogo