Угловая директива, утечка дочернего содержимого

Question

У меня есть собственный тег <my-tag> создан с угловой директивой, и замените ее простой <div> в коде определения директивы:

.directive('myTag',function(){
  return {
    restrict: 'E',
    template: '<div>contents in template</div>',
    replace: true
  }
})

Все становится странно, когда я помещаю этот тег внутрь <p> тег и иметь некоторый элемент блока (для последующего включения возможно):

<p>
    <my-tag><div>leak</div></my-tag>
</p>

визуализированный HTML-код выглядит примерно так:

<p><div>contents in template</div></p>
<div>leak</div>

вместо того, чтобы быть заменены в целом, <div>leak</div> просочилась Во-первых, я подумал, что это может быть проблема встроенного / блочного элемента, поскольку <p> В теге допускается только содержание фраз. Но когда я переключил его на <pre>, <h1>, <span>(у них у всех одинаковые ограничения в модели контента), у меня больше нет проблем:

<span>
    <my-tag><div>leak</div></my-tag>
</span>

представленный HTML (как и ожидалось):

<span><div>contents in template</div></span>

Это может быть большой проблемой при попытке включить содержимое - они полностью недоступны в директиве.

Вот плункер для живой демонстрации: http://plnkr.co/edit/hOByDb

Честно говоря, я не уверен, является ли это проблема браузера или проблема Angular, или, возможно, это просто предполагаемое поведение?

Редактировать:

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

Answer 1

Согласно документам W3C ( HTML4 и HTML5), элементы уровня блока не являются допустимыми дочерними элементами <p>, Это причина вашей проблемы

Элемент P представляет абзац. Он не может содержать элементы уровня блока (включая сам P).

Справочные документы