angular directive leaking child contents out

Question

I have a custom tag <my-tag> created with an Angular directive, and replace it with a simple <div> in the directive definition code:

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

Things get strange when I put this tag inside a <p> tag and have some block element in it (for later transcluding maybe):

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

the rendered html is something like this:

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

rather than been replaced as a whole, the <div>leak</div> is leaked out. Firstly I thought this might be some inline/block element issue, since the <p> tag is only allowed to have phrasing content in it. But when I switched it to <pre> , <h1> , <span> (they all have the same restrictions in the content model), I don't have the problem anymore:

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

rendered html (as expected):

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

This could be a big problem when tries to transclude the contents - they are completely unavailable in the directive.

Here is a plunker for the live demo: http://plnkr.co/edit/hOByDb

Frankly I'm not sure whether this is a browser issue or a Angular issue, or maybe is just an intended behavior?

Edit:

I think this is rather a common HTML issue than an Angular issue, but it's more likely to happen in an Angular project, since we tend to have many custom directives/tags there.

Answer 1

According to W3C docs ( HTML4 & HTML5), block level elements are not valid children of <p> . This is cause of your problem

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

Reference docs