AngularJS: ngInclude vs директива


93

Я не совсем понимаю, когда использовать директиву, а когда более целесообразно использовать nginclude. Возьмем этот пример: у меня есть частичный, password-and-confirm-input-fields.htmlто есть html для ввода и подтверждения пароля. Я использую это как на странице регистрации, так и на странице смены пароля. Каждая из этих двух страниц имеет контроллер, а частичный HTML-код не имеет выделенного контроллера.

Следует использовать директиву или ngIncludeдля этого?


Я бы каждый раз использовал директиву, но мне любопытно, что скажут более опытные специалисты по Angular.
Austin Mullins

1
Если это действительно независимый компонент, вероятно, с ним должен быть связан собственный контроллер. ИМО, я бы использовал частичный - но мне любопытно получить еще немного информации
tymeJV

4
Если для этой части требуется какой-либо js-код, используйте директиву. Если это просто HTML, используйте ngInclude.
Daniel Beck

Ответы:


122

Все зависит от того, что вы хотите от фрагмента кода. Лично, если в коде нет никакой логики или даже не нужен контроллер, я соглашусь ngInclude. Я обычно помещаю большие более «статические» фрагменты HTML, которые я не хочу загромождать здесь представление. (то есть: скажем, большая таблица, данные которой в любом случае поступают от родительского контроллера. Это чище, <div ng-include="bigtable.html" />чем все эти строки, загромождающие представление)

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

ngInclude

Иногда вы увидите, ngInclude'sчто на них влияет их внешний вид $scope/ interface. Например, большой / сложный репитер. Эти 2 интерфейса связаны друг с другом из-за этого. Если что-то в основном $scopeизменится, вы должны изменить / изменить свою логику в включенном партиале.

Директивы

С другой стороны, директивы могут иметь явные области действия / контроллеры / и т. Д. Поэтому, если вы думаете о сценарии, в котором вам придется повторно использовать что-то несколько раз, вы можете увидеть, как подключение его собственной области может сделать жизнь проще и меньше. сбивает с толку.

Кроме того, всякий раз, когда вы собираетесь вообще взаимодействовать с DOM, вы должны использовать директиву. Это делает его более удобным для тестирования и отделяет эти действия от контроллера / службы / и т.д., что вам и нужно!

Совет: Убедитесь , что не использовать ограничения: «E» , если вы заботитесь о IE8! Есть способы обойти это, но они раздражают. Просто упростите жизнь и придерживайтесь атрибута / etc.<div my-directive />

Компоненты [Обновление от 01.03.2016]

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

В заключении:

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

  • Более расширяемый
  • Вы можете использовать шаблон и иметь свой файл извне (например, ngInclude)
  • Вы можете выбрать использование родительской области или ее собственной изолированной области внутри директивы.
  • Лучшее повторное использование в вашем приложении


Обновление 3/1/2016

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

Компоненты очень похожи на Angular 2 @Component. Таким образом, мы инкапсулируем логику и HTML в одной и той же области.


Убедитесь, что вы инкапсулируете как можно больше вещей в компоненты, это значительно упростит переход на Angular 2! (Если вы решите осуществить переход)

Вот хорошая статья, описывающая этот процесс миграции с использованием directives(очень похожего, если вы, конечно, собирались использовать компоненты): http://angular-tips.com/blog/2015/09/migrating-directives-to-angular-2/


5
Я согласен с этим ответом. Кривая обучения директивам крутая, но она действительно окупается, когда вы ее получаете.
Jazzy

@mcpDESIGNS, один случай, который, возможно, не полностью соответствует этому ответу (по крайней мере, не два первых абзаца). Если у меня есть nav-partial с собственным контроллером, и я буду использовать его только один раз (в файле index.html), то это, вероятно, должно быть частичным, а не директивой, поскольку он используется только один раз (это своего рода отдельное приложение в том смысле, что оно не входит в состав ngview), даже если у него своя логика. Или?
EricC

Это все еще сбивает с толку ... вы также можете указать контроллер при использовании ngInclude, посмотрите на это: stackoverflow.com/questions/13811948/…
Марвен Трабелси

1
Конечно, но он всегда каким-то образом полностью связан с родительским контроллером. Где директива может создать внутри себя контроллер для загрузки шаблона. Он может быть полностью отдельным (если хотите)
Марк Пешак - Trilon.io

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