Question

我有一个使用Angular指令创建的自定义标记<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>标记只允许phrasing content。但是当我将其切换为<pre>，<h1>，<span>时（它们在内容模型中都有相同的限制），我不再有问题了：

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

渲染html（如预期的那样）：

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

当尝试转换内容时，这可能是一个大问题 - 它们在指令中完全不可用。

这是现场演示的一个plunker： http://plnkr.co/edit/hOByDb

~~坦率地说，我不确定这是浏览器问题还是Angular问题，或者可能只是预期的行为？~~

编辑：

我认为这是一个常见的HTML问题，而不是Angular问题，但它更有可能发生在Angular项目中，因为我们往往有很多自定义指令/标签。

Answer 1

根据W3C文档（HTML4和HTML5），块级元素不是<p>的有效子元素。这是你的问题的原因

P元素代表一个段落。它不能包含块级元素（包括P本身）。