Директива AngularJS ограничивает A и E

113

Я работаю в небольшой команде, занимаюсь разработкой AngularJS и пытаюсь поддерживать некоторые базовые стандарты и лучшие практики; особенно учитывая, что мы относительно новички в Angular.

У меня вопрос по поводу Директив. Точнее restrictварианты.

Некоторые из нас используют, restrict: 'E'таким образом, <my-directive></my-directive>в html.

Другие используют restrict: 'A'и имеют <div my-directive></div>в HTML.

Тогда, конечно, вы можете restrict: 'EA'использовать любое из вышеперечисленных.

На данный момент в этом нет ничего страшного, хотя, когда этот проект станет настолько большим, насколько он собирается получить, я хотел бы, чтобы кто-нибудь посмотрел на него и легко понял, что происходит.

Есть ли плюсы и минусы атрибута или элемента?

Есть ли какие-то подводные камни, которые мы должны знать, выбирая, скажем, элемент вместо атрибута?

javascript html angularjs

— Даррен Уэйнрайт
источник

100

По документации :

Когда мне следует использовать атрибут вместо элемента? Используйте элемент при создании компонента, который управляет шаблоном. Обычно это происходит, когда вы создаете предметно-ориентированный язык для частей вашего шаблона. Используйте атрибут, когда вы украшаете существующий элемент новыми функциями.

Чтобы получить полный ответ, отредактируйте следующий комментарий о подводных камнях:

Предполагая, что вы создаете приложение, которое должно работать в Internet Explorer <= 8, поддержка которого была прекращена командой AngularJS из AngularJS 1.3, вам необходимо выполнить следующие инструкции, чтобы оно работало: https: //docs.angularjs .org / guide / ie

— тупица
источник

3

Я читал эти документы, но пропустил этот :) Спасибо.

— Даррен Уэйнрайт

3

Это объяснение не охватывает никаких подводных камней и плюсов / минусов.

— Константин Красс

Соответственно обновил свой ответ о подводных камнях. Я не упомянул плюсы и минусы, потому что думаю, что здесь мы больше говорим о лучших практиках, особенно когда они рекомендуются и объясняются командой Angular.

— ngasull

1

«Я не упомянул плюсы и минусы, потому что думаю, что здесь мы больше говорим о лучших практиках, особенно когда они рекомендуются и объясняются командой Angular». да? :)

— Alexander Mills

169

restrict предназначен для определения типа директивы, и это может быть A(Атрибут), C(Класс), E(Элемент) и M(coMment), предположим, что имя директивы Doc:

Тип: Использование

А = <div Doc></div>

C = <div class="Doc"></div>

E = <Doc data="book_data"></Doc>

M = 

— Сейф Тамаллах
источник

2

менее ясен, чем ответ @nikunj, но, увидев их ответ, я понял ваш ...

— Александр Миллс

47

Параметр ограничения обычно устанавливается на:

'A' - соответствует только имени атрибута
'E' - соответствует только имени элемента
'C' - соответствует только имени класса
'M' - совпадает только с комментарием

Вот ссылка на документацию .

— Никундж Ганди
источник

просто и чисто

— Gaurav_0093

7

Элемент не поддерживается в IE8, вам нужно поработать, чтобы IE8 принял настраиваемые теги.

Одним из преимуществ использования атрибута над элементом является то, что вы можете применить несколько директив к одному и тому же узлу DOM. Это особенно удобно для таких вещей, как элементы управления формы, где вы можете выделять, отключать или добавлять метки и т. Д. С дополнительными атрибутами без необходимости заключать элемент в кучу тегов.

— Джек Аллан
источник

5

Одна из известных мне ловушек - проблема IE с пользовательскими элементами. Как указано в документах :

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>

— Ханх ТО
источник

4

Ловушка:

Использование собственного элемента 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>

Мы не используем кастомные элементы html, потому что если это 2 факта.

Каждая директива стороннего фреймворка может быть написана двумя способами:

<my-directive></my-directive>

или

<div data-my-directive></div>

делает то же самое.

— Константин Красс
источник

1

если вы хотите создать директиву с равным 1 параметром области видимости, проще сделать это с помощью A. Поскольку вам не нужно создавать дополнительный атрибут.

— Константин Красс

Что вы имеете в виду под дополнительным? Обе альтернативы имеют ровно один атрибут.

— Лучше Оливер

3

2 проблемы с элементами:

Плохая поддержка старых браузеров.
SEO - движку Google они не нравятся.

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

— Амир Попович
источник

Директивы как элементы могут вызвать проблемы с SEO? Я удивлен. А как насчет replaceатрибута true?

— chalasr

1

На эти утверждения нужны ссылки. Пункт 1 довольно хорошо известен в других местах, но я бы хотел увидеть источники о пункте 2.

— rinogo