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

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

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

Все зависит от того, что вы хотите от фрагмента кода. Лично, если в коде нет никакой логики или даже не нужен контроллер, я соглашусь 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/