Директивы элементов AngularJS не отображаются при использовании самозакрывающихся тегов

У меня есть в моих html файлах директивы

<add />
<back />

и директивы находятся в форме

.directive('add', ['$window', ...

.directive('back', ['$window',

Это отлично работает.

Если я изменю директивы на случай верблюда:

.directive('addPlayer', ['$window', ...

<add_player />
<back />

<add:player />
<back />

отображается в то время как

<add-player />  regular dash
<back />

отображается только <add-player>, и все после этого не отображается.

Любые идеи, почему?

EDIT:

Я как бы получил такое же поведение здесь

http://plnkr.co/edit/cpP4c2TyZwv5Y4BrNUBb?p=preview

Ответ 1

Чтобы поставить вопрос на отдых, я цитирую официальное выражение команды AngularJS: (sic)

самозакрывающиеся или недействительные элементы, определенные спецификацией html, очень важны для анализатора браузера. вы не можете сделать свой собственный, поэтому для ваших пользовательских элементов вы должны придерживаться непустых элементов (<foo></foo>).

это не может быть изменено в angular.

- Игорь Минар

^{source: https://github.com/angular/angular.js/issues/1953#issuecomment-13135021}

Следуйте остальной части беседы на странице AngularJS, где обсуждается возможность использования XHTML для доставки контента с самозакрывающимися тегами, приемлемыми для браузер. Однако имейте в виду, что он не полностью поддерживается AngularJS.

Ответ 2

Недавно я столкнулся с той же проблемой и смог исправить ее, не используя самозакрывающиеся теги. Попробуйте <add-player></add-player> вместо самозакрывающейся версии.

Я не знаю, почему самозакрывающиеся теги не работают с тире в имени тега директивы. Быстрое исследование в тот же день и ничего не нашел на стороне HTML/XHTML. Возможно, ошибка/ограничение в Angular?

Ответ 3

Спецификация HTML не позволяет самозакрывающиеся теги для непустых элементов.

Правила синтаксиса HTML ^[W3C]

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

A "<" характер.

Имя тега элементов.

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

Необязательно, один или несколько символов пробела.

Необязательно, символ "/", который может присутствовать только в том случае, если элемент является элементом void.

Символ " > ".

В спецификации HTML5 существует ограниченное количество элементов void > . Вот полный список:

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr.

Что действительно происходит

Анализатор браузера должен прослушивать спецификацию. Поскольку использование косой черты в теге не-void недействительно, синтаксический анализатор игнорирует окончание />, а <back /> означает <back>. Поэтому вы никогда не закрываете первый элемент, который мешает другим работать.

В Plunker у вас есть:

<body>
   <back></back>
   Self closing <back />
   Self closing <back />
</body>

который анализирует на

<body>
   <back></back>
   Self closing <back>
      Self closing <back>
    </back>
  </back>
</body>

Затем вы указываете template: '<button>back</button>' в своей директиве, которая заменяет back (и его дочерние элементы) указанным HTML, в результате чего:

<body>
   <back>
       <button>back</button>
   </back>
   Self closing <back>
       <button>back</button>
   </back>
</body>

Что мне делать тогда?

Используйте <back></back> для всех, и он будет работать нормально. В качестве альтернативы вы можете использовать атрибуты элемента: <div back="attr"></div>.

Подробнее см. следующие обсуждения: