Директива AngularJS Ограничение A vs E
Я работаю в небольшой команде, создавая в AngularJS и стараясь поддерживать некоторые базовые стандарты и лучшие практики; особенно учитывая, что мы относительно новы с Angular.
Мой вопрос касается директив. Точнее, параметры restrict
.
Некоторые из нас используют restrict: 'E'
, имея <my-directive></my-directive>
в html.
Другие используют restrict: 'A'
и имеют <div my-directive></div>
в html.
Тогда, конечно, вы можете использовать restrict: 'EA'
и использовать любой из приведенных выше.
На данный момент это не имеет большого значения, хотя, когда этот проект будет таким же большим, как он собирается получить, мне бы хотелось, чтобы кто-то смотрел на него, чтобы легко понять, что происходит.
Есть ли плюсы/минусы для атрибута или элемента, способного делать что-то?
Есть ли какие-либо подводные камни, которые мы должны знать, если вы выбираете атрибут say над атрибутом?
Ответы
Ответ 1
Согласно документации:
Когда следует использовать атрибут в сравнении с элементом? Использовать элемент, когда вы создаете компонент, который контролирует шаблон. общий случай для этого - когда вы создаете доменную Язык для частей вашего шаблона. Используйте атрибут, когда вы украшая существующий элемент новыми функциями.
Отредактируйте следующий комментарий к ловушкам для получения полного ответа:
Предполагая, что вы создаете приложение, которое должно запускаться в Internet Explorer <= 8, поддержка которого была отключена командой AngularJS от AngularJS 1.3, вам необходимо выполнить следующие инструкции, чтобы заставить ее работать: https://docs.angularjs.org/guide/ie
Ответ 2
Ограничение - это определение типа директивы, и оно может быть A
(атрибут), C
(класс), E
(элемент) и M
(coMment), допустим, что имя директива Doc
:
Тип: Использование
A = <div Doc></div>
C = <div class="Doc"></div>
E = <Doc data="book_data"></Doc>
M = <!--directive:Doc -->
Ответ 3
Параметр ограничения обычно имеет значение:
- 'A' - соответствует только имени атрибута
- 'E' - соответствует только имени элемента
- 'C' - соответствует только имени класса
- 'M' - соответствует только комментариям
Вот ссылка .
Ответ 4
Элемент не поддерживается в IE8 из коробки, вам нужно сделать некоторую работу, чтобы IE8 принимал пользовательские теги.
Одним из преимуществ использования атрибута над элементом является то, что вы можете применить несколько директив к тому же DOM node. Это особенно удобно для таких вещей, как элементы управления формой, где вы можете выделить, отключить или добавить ярлыки и т.д. С дополнительными атрибутами без необходимости обертывания элемента в кучу тегов.
Ответ 5
Одна из подводных камней, как я знаю, - проблема IE с пользовательскими элементами. Как указано в docs:
3) вы не используете теги пользовательских элементов, такие как (используйте вместо этого).
4), если вы используете теги пользовательских элементов, тогда вы должны предпринять следующие шаги: сделайте IE 8 и ниже счастливым
<!doctype html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">
<head>
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-pluralize');
document.createElement('ng-view');
// Optionally these for CSS
document.createElement('ng:include');
document.createElement('ng:pluralize');
document.createElement('ng:view');
</script>
<![endif]-->
</head>
<body>
...
</body>
</html>
Ответ 6
Pitfall:
- Использование собственного элемента html, такого как
<my-directive></my-directive>
, не будет работать в IE8 без обхода (https://docs.angularjs.org/guide/ie)
- Использование собственных html-элементов приведет к отказу html-проверки.
- Директивы с равным одним параметром могут выполняться следующим образом:
<div data-my-directive="ValueOfTheFirstParameter"></div>
Вместо этого:
<my-directive my-param="ValueOfTheFirstParameter"></my-directive>
Мы dont используем пользовательские элементы html, потому что если это два факта.
Каждая директива сторонней структуры может быть записана двумя способами:
<my-directive></my-directive>
или
<div data-my-directive></div>
делает то же самое.
Ответ 7
Юридические ограничения:
- E для имени элемента
- А для атрибута
- C для класса
- M для комментариев
По умолчанию значение EA, что означает, что и имена элементов, и имена атрибутов могут вызывать директиву.
Ответ 8
2 проблемы с элементами:
- Плохая поддержка со старыми браузерами.
- SEO - движок Google им не нравится.
Использовать атрибуты.