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

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

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

Ответ 1

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

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

ngInclude

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

директивы

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

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

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

Компоненты [Обновление 3/1/2016]

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

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

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

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


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

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

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


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

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