2

我有一个<my-tag>使用 Angular 指令创建的自定义标记,并将其替换<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>

当试图嵌入内容时,这可能是一个大问题——它们在指令中完全不可用。

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

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

编辑:

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

4

1 回答 1

1

根据 W3C 文档(HTML4 和 HTML5),块级元素不是<p>. 这是你的问题的原因

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

参考文档

于 2013-11-29T06:32:06.807 回答