22

我有我的 html 文件指令

<add />
<back />

指令在表格上

.directive('add', ['$window', ...

和

.directive('back', ['$window',

这工作正常。

如果我将指令更改为骆驼案例：

.directive('addPlayer', ['$window', ...

<add_player />
<back />

和

<add:player />
<back />

显示正常而

<add-player />  regular dash
<back />

仅显示<add-player>，之后的所有内容均不显示。

任何想法为什么？

编辑：

我在这里有同样的行为

http://plnkr.co/edit/cpP4c2TyZwv5Y4BrNUBb?p=preview

4

3 回答 3

42

为了解决您的问题，我引用了 AngularJS 团队的官方声明：（原文如此）

html 规范定义的自闭合或 void 元素对于浏览器解析器来说非常特殊。您不能自己制作，因此对于您的自定义元素，您必须坚持使用非空元素 ( <foo></foo>)。

这不能改变角度。

- 伊戈尔米纳尔

来源：https ://github.com/angular/angular.js/issues/1953#issuecomment-13135021

关注AngularJS 问题页面上的其余对话，他们讨论了使用XHTML浏览器可以接受的带有自动关闭标签的内容的可能性。但是请注意，AngularJS 并不完全支持它。

于 2014-07-29T09:47:38.123 回答
10

HTML 规范不允许在非 void 元素上使用自闭合标签。

HTML 语法规则[ W3C ]

元素有一个开始标签来指示它们从哪里开始。非空元素有一个结束标签来指示它们的结束位置。
开始标签由以下部分组成，完全按照以下顺序：

  1. 一个“<”字符。
  2. 元素的标签名称。
  3. 可选地，一个或多个属性，每个属性前面必须有一个或多个空格字符。
  4. 可选地，一个或多个空格字符。
  5. 可选地，“/”字符，仅当元素是空元素时才会出现。
  6. 一个“>”字符。

HTML5 规范中的void 元素数量有限。以下是完整列表：

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr.

到底发生了什么

浏览器的解析器必须听规范。由于在非 void 元素标记中使用斜线是无效的，因此解析器会忽略结尾/>，而<back />意味着<back>。因此，您永远不会关闭第一个阻止其他元素工作的元素。

在Plunker 上，您有：

<body>
   <back></back>
   Self closing <back />
   Self closing <back />
</body>

解析为

<body>
   <back></back>
   Self closing <back>
      Self closing <back>
    </back>
  </back>
</body>

然后template: '<button>back</button>'，您在指令中指定用指定的 HTML 替换back（及其子项），从而导致：

<body>
   <back>
       <button>back</button>
   </back>
   Self closing <back>
       <button>back</button>
   </back>
</body>

那我该怎么办？

为所有人使用<back></back>，它会正常工作。或者，您可以使用元素属性：<div back="attr"></div>.

有关更多详细信息，请参阅以下讨论：

于 2015-07-30T12:47:51.487 回答
6

我最近遇到了同样的问题，并设法通过不使用自闭合标签来解决它。尝试<add-player></add-player>而不是自动关闭版本。

我不知道为什么自闭合标签不适用于指令标签名称中的破折号。当天进行了快速研究，并没有在 HTML/XHTML 方面找到任何东西。也许是 Angular 中的错误/限制？

于 2013-08-07T13:54:21.080 回答