AngularJS: ngInclude vs direktiva


93

Я не зовсім розумію, коли використовувати директиву і коли було б більш доречно використовувати nginclude. Візьмемо цей приклад: у мене є частковий, password-and-confirm-input-fields.htmlтобто html для введення та підтвердження пароля. Я використовую це як на сторінці реєстрації, так і на сторінці змін-пароль. Ці дві сторінки мають контролер на кожній, частковий html не має виділеного контролера.

Чи варто використовувати директиву чи ngIncludeдля цього?


Я б щоразу йшов із директивою, але мені цікаво, що сказали б більш досвідчені люди з кутових слів.
— Остін Маллінз

1
Якщо це справді незалежний компонент, він, ймовірно, повинен мати власний контролер, пов'язаний з ним. IMO, я б скористався частковим, але мені цікаво ще більше інформації
— tymeJV

4
Якщо для цієї часткової частини потрібен js-код, скористайтеся директивою. Якщо це лише HTML, використовуйте ngInclude.
— Даніель Бек

Відповіді:


122

Все залежить від того, що потрібно від фрагмента коду. Особисто, якщо код не має логіки або навіть не потрібен контролер, тоді я переходжу з ngInclude. Я, як правило, розміщую великі більш "статичні" фрагменти HTML, які я не хочу захаращувати погляд. (тобто: Скажімо, велика таблиця, дані якої так чи інакше надходять від батьківського контролера. Це чистіше, <div ng-include="bigtable.html" />ніж усі ці рядки, що захаращують погляд)

Якщо є логіка, маніпуляція з DOM, або вам потрібно, щоб вона була налаштована (інакше вона відображається по-різному) у різних випадках, тоді вона directivesє кращим вибором (вони спочатку хизуються, але вони дуже потужні, дайте їй час) .

ngInclude

Іноді ви побачите, ngInclude'sщо на них впливає їх зовнішність $scope/ interface. Такий, як великий / складний ретранслятор, дозволяє сказати. Ці 2 інтерфейси пов'язані між собою через це. Якщо щось в основному $scopeзміниться, ви повинні змінити / змінити свою логіку в межах включеної часткової.

Директиви

З іншого боку, директиви можуть мати чіткі області застосування / контролери / тощо. Отже, якщо ви думаєте про сценарій, коли вам доведеться повторно використовувати щось кілька разів, ви можете побачити, як пов'язаний власний обсяг полегшить життя та менше заплутаний.

Крім того, у будь-який час, коли ви взагалі збираєтесь взаємодіяти з DOM, вам слід використовувати директиву. Це полегшує тестування і відключає ці дії від контролера / служби / тощо, що ви хочете!

Порада: Переконайтеся, що не використовуйте обмеження: "E", якщо ви дбаєте про IE8! Існують шляхи навколо цього, але вони дратують. Просто полегшіть життя та дотримуйтесь атрибутів / тощо.<div my-directive />

Компоненти [Оновлення 3.01.2016]

Доданий у Angular 1.5, він по суті є обгорткою .directve(). Компонент слід використовувати більшу частину часу. Він видаляє багато директивних кодів котлоагрегату за замовчуванням до таких речей restrict: 'E', scope : {}, bindToController: true. Настійно рекомендую використовувати їх майже для всього додатка, щоб легше перейти до Angular2.

На закінчення:

Ви повинні створювати компоненти та директиви більшу частину часу.

  • Більш розширювані
  • Ви можете шаблонувати та мати свій файл зовні (наприклад, ngInclude)
  • Ви можете скористатися батьківською областю або її власною ізоляцією в межах директиви.
  • Краще повторне використання вашої програми


Оновлення 1.01.2016

Тепер, коли Angular 2 повільно загортається, і ми знаємо загальний формат (звичайно, все ще будуть якісь зміни тут і там) просто хотів додати, як це важливо зробити components(іноді директиви, якщо вам потрібно, щоб вони були обмеженими: ' E ', наприклад).

Компоненти дуже схожі на кутові 2 @Component. Таким чином ми інкапсулюємо логіку та html в тій же області.


Переконайтеся, що ви інкапсулюєте якомога більше речей у компоненти, це значно полегшить перехід на Angular 2! (Якщо ви вирішили зробити перехід)

Ось приємна стаття, що описує цей процес міграції з використанням directives(дуже схожа, якщо ви збиралися використовувати компоненти звичайно): http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/


5
Я згоден з цією відповіддю. Крива навчання для директив крута, але вона справді окупається, як тільки ви її отримаєте.
— Джазі

@mcpDESIGNS - один випадок, який, можливо, не відповідає цій відповіді ідеально (принаймні, не два перші абзаци). Якщо у мене є nav-частковий, з його власним контролером, і я використовуватиму це лише один раз (у index.html-файлі), то це, мабуть, має бути частковим, а не директивою, оскільки воно використовується лише один раз (це вид окремого додатка в тому сенсі, що він не включається до складу ngview), навіть якщо він має свою логіку. Або?
— EricC

Це все ще заплутано. Ви також можете вказати контролер під час використання ngInclude, подивіться на це: stackoverflow.com/questions/13811948/…
— Marwen Trabelsi

1
Звичайно, але він завжди повністю якимось чином пов'язаний з батьківським контролером. Де директива може створити контролер всередині себе, коли шаблон завантажується. Це може бути зовсім окремо (якщо ви хочете)
— Марк Пешек - Trilon.io

1
Найкраще, що ви можете зробити, це абстрагувати це поняття на заводі чи щось таке, таким чином ви можете просто зателефонувати за допомогою linkфункції та вуаля! Було б добре вписатись у директиви, хоча, без сумніву :( @Arwin
— Mark Pieszak - Trilon.io
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.