Я работаю в небольшой команде, занимаюсь разработкой AngularJS и пытаюсь поддерживать некоторые базовые стандарты и лучшие практики; особенно учитывая, что мы относительно новички в Angular.
У меня вопрос по поводу Директив. Точнее restrict
варианты.
Некоторые из нас используют, restrict: 'E'
таким образом, <my-directive></my-directive>
в html.
Другие используют restrict: 'A'
и имеют <div my-directive></div>
в HTML.
Тогда, конечно, вы можете restrict: 'EA'
использовать любое из вышеперечисленных.
На данный момент в этом нет ничего страшного, хотя, когда этот проект станет настолько большим, насколько он собирается получить, я хотел бы, чтобы кто-нибудь посмотрел на него и легко понял, что происходит.
Есть ли плюсы и минусы атрибута или элемента?
Есть ли какие-то подводные камни, которые мы должны знать, выбирая, скажем, элемент вместо атрибута?
источник
restrict предназначен для определения типа директивы, и это может быть
A
(Атрибут),C
(Класс),E
(Элемент) иM
(coMment), предположим, что имя директивыDoc
:источник
Параметр ограничения обычно устанавливается на:
Вот ссылка на документацию .
источник
Элемент не поддерживается в IE8, вам нужно поработать, чтобы IE8 принял настраиваемые теги.
Одним из преимуществ использования атрибута над элементом является то, что вы можете применить несколько директив к одному и тому же узлу DOM. Это особенно удобно для таких вещей, как элементы управления формы, где вы можете выделять, отключать или добавлять метки и т. Д. С дополнительными атрибутами без необходимости заключать элемент в кучу тегов.
источник
Одна из известных мне ловушек - проблема IE с пользовательскими элементами. Как указано в документах :
источник
Ловушка:
<my-directive></my-directive>
будет работать в IE8 без обходного пути ( https://docs.angularjs.org/guide/ie )<div data-my-directive="ValueOfTheFirstParameter"></div>
Вместо этого:
<my-directive my-param="ValueOfTheFirstParameter"></my-directive>
Мы не используем кастомные элементы html, потому что если это 2 факта.
Каждая директива стороннего фреймворка может быть написана двумя способами:
<my-directive></my-directive>
или
<div data-my-directive></div>
делает то же самое.
источник
2 проблемы с элементами:
Используйте атрибуты.
источник
replace
атрибутаtrue
?