Angular директивы - элемент или атрибут?

Я участвую в команде с примерно 6 пользовательскими интерфейсами различного качества и рядом с опытом Angular. Многие из них - подрядчики, у которых мало опыта работы с базой кода. Приложение имеет очень фантастический (сложный) интерфейс. Он поддерживает IE8 + (скоро, надеюсь, IE9 +).

Мы представляем Angular для основного расширения приложения, и меня попросили написать рекомендации по использованию Angular для команды.

Мы будем использовать директивы для создания модных элементов пользовательского интерфейса, все с префиксом "ipwr", чтобы избежать конфликтов имен. Я пытаюсь решить, следует ли указывать, что разработчики дают своим директивам ограничение "элемент" или "атрибут". Мандат только один, чтобы избежать хаоса и путаницы.

Мой вопрос: какой ограничитель лучше или более популярен для директив, "элементов" или "атрибутов"? Моя основная проблема заключается в простоте использования для людей с небольшим опытом Angular, которые являются новичками в базе кода приложения, уменьшают количество ошибок, копируют и вставляют поведение и т.д.

Ответ 1

В руководстве angular указывается, что вы должны использовать ограничение "element" всякий раз, когда директива имеет полный контроль над этим шаблоном, то есть имеет шаблон, который он визуализирует, и т.д.

Для атрибутов они предлагают использовать их только тогда, когда вы добавляете "поведение" к существующему элементу или украшаете существующий элемент.

Например, подумайте о директиве ng-click, этот атрибут используется не как элемент, потому что директива click просто добавляет поведение клика к некоторому элементу.

Другим примером может быть директива ng-repeat, она также используется как атрибут не как элемент, потому что он будет повторять элемент, в котором он используется.

Теперь это руководство из документации angular; однако, я не знаю, обязательно, что элемент против атрибута будет давать вам "лучший" подход, скорее это соглашение.

Теперь, если вам нужно поддерживать старые браузеры, вы можете захотеть использовать либо директивы комментариев, либо класс.

Мои личные предпочтения - просто использовать ограничение атрибута; главным образом потому, что люди, которые новичок в angular, сначала перегружены, когда видят ограничение и варианты вариантов, которые могут быть использованы.

Ответ 2

Обычно я принимаю решение руководство по стилю John Papa AngularJS при принятии этих решений. Он говорит:

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

Ответ 3

Если вы хотите, чтобы ваш HTML был действительным, вы должны использовать атрибуты, например. если у вас есть директива ipwr-modal, вы можете объявить ее как <div data-ipwr-modal="you-could-put-some-binding-here"></div>.

Однако при создании директив с настраиваемым макетом вам лучше использовать объявление элемента (если вам не нужно, чтобы ваш HTML был действительным). Это более очевидный способ сказать: "Эй, у нас есть пользовательский компонент здесь".

Это сообщение в блоге объясняет это еще несколькими идеями

Ответ 4

Некоторые моменты, которые следует учитывать:

Большинство атрибутов времени - это лучший/самый удобный вариант (это не случайное по умолчанию).
Все, что вы можете сделать с директивами с привязкой к элементу, вы также можете сделать с привязкой к атрибуту.
Директивы с привязкой к элементу могут быть более наглядными/читаемыми в разы.
Если вы хотите, чтобы ваш код проходил определенные типы проверки, вы должны использовать атрибуты.
Поскольку вы хотите поддерживать IE8, имейте в виду, что пользовательские теги имеют дополнительные накладные расходы (дополнительная информация), что ухудшает ремонтопригодность.

<суб > BTW, вы не можете ограничивать директивы только элементами (не затрагивая функциональность), поэтому речь идет скорее о том, чтобы разрешить "элемент" или нет. Обратите внимание, что элемент часто имеет несколько директив, а директивы, размещенные на одном элементе, могут взаимодействовать и дополнять друг друга. Поэтому ограничение использования директив для "элемента" означает ограничение количества пользовательских директив на элемент до 1, что значительно снижает функциональный потенциал. Суб >

Тем не менее, это то, что я (d):

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