角度指令泄漏子内容答案

【问题标题】：angular directive leaking child contents out角度指令泄漏子内容
【发布时间】：2013-11-29 15:42:41
【问题描述】：

我有一个使用 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 项目中，因为我们倾向于在那里有许多自定义指令/标签。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：