我的html文件指令
<add />
<back />
，指令在表格
上.directive('add', ['$window', ...
和
.directive('back', ['$window',
这很好用。
如果我将指令改为camel case：
.directive('addPlayer', ['$window', ...
<add_player />
<back />
和
<add:player />
<back />
显示正常
<add-player /> regular dash
<back />
仅显示<add-player>，之后的所有内容都不会显示。
任何想法为什么？
修改
我在这里得到了同样的行为
答案 0 :(得分：34)
为了让你的问题得到解决，我引用了AngularJS团队的官方声明:(原文如此）
自我关闭或void元素，因为html规范定义它们对浏览器解析器非常特殊。你不能自己做，所以对于你的自定义元素，你必须坚持非空元素（
<foo></foo>）。这不能改变角度。
- IgorMinar
来源：https://github.com/angular/angular.js/issues/1953#issuecomment-13135021
在AngularJS issue's page上进行对话的其余部分，讨论使用XHTML传送带有浏览器可接受的自动关闭标记的内容的可能性。但请注意，AngularJS并不完全支持它。
答案 1 :(得分：6)
我最近遇到了同样的问题，并设法通过不使用自闭标签来修复它。请尝试<add-player></add-player>而不是自动关闭版本。
我不知道为什么自闭标签在指令的标签名称中不能使用破折号。在当天进行了快速研究，在HTML / XHTML方面没有找到任何内容。也许是Angular中的错误/限制？
答案 2 :(得分：6)
HTML规范不允许在非空元素上使用自动关闭标记。
元素有一个开始标记，用于指示它们的开始位置。非空元素具有结束标记以指示它们的结束位置 开始标记由以下部分组成，完全按以下顺序排列：
- A“＆lt;”字符。
- 元素的标记名称。
- （可选）一个或多个属性，每个属性必须以一个或多个空格字符开头。
- （可选）一个或多个空格字符。
- （可选）“/”字符，仅当元素为void元素时才会出现。
- A“＆gt;”字符。
HTML5规范中的void elements数量有限。这是完整的清单：
area，base，br，col，command，embed，hr，img ，input，keygen，link，meta，param，source，track，wbr。< / p>
浏览器的解析器必须监听规范。由于在非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>。
有关详细信息，请参阅以下讨论：