AngularJS: ngInclude против директивы

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

Должен ли я использовать директиву или ngInclude за это?

Источник

1 ответ

Решение

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

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

ngInclude

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

Директивы

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

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

Совет: убедитесь, что вы не используете restrict: 'E', если вам небезразличен IE8! Есть способы обойти это, но они раздражают. Просто сделайте жизнь проще и придерживайтесь атрибута / и т.д. <div my-directive />

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

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

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

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

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

Обновление 01.03.2016

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

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

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

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

Источник
Другие вопросы по тегам