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.