Директива 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 = 

Ответ 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 им не нравится.

Использовать атрибуты.