Javascript 为什么角度区分`<；我的元素></我的元素>；`和`<；我的元素/>；`？

我刚刚发现Angular 1.2.1有一个奇怪的问题，在中演示过（在IE、FF和Chrome中都测试过）：如果我创建一个非常简单的模板指令，如果它没有第一次被用作

，它将无法作为

工作

这是整个fiddle中的js代码：

angular.module('app', []);
angular.module('app').directive('myElement', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<p>Hello, element!</p>'
    };
});

angular.module（'app'，[]）；
angular.module（'app'）。指令（'myElement'，函数（）{
返回{
限制：'E'，
替换：正确，
模板：“你好，元素！
”
};
});

以及html：

<div ng-app="app">
    <my-element />
    <my-element></my-element>
</div>

我期望从中得到的输出是两段内容

Hello，element，但我只得到一个。但是，如果我颠倒了两个
-标记的顺序，使自动关闭的标记紧跟其后，那么它们都会给出输出

为什么Angular的行为会如此病态？
问题在于：-


在HTML中没有自动关闭标记这样的东西。只有叶子的标签。叶子标签是固定的。
不应使用您自己的自动关闭标签
浏览器将解释标记是否为“自动关闭”

它不知道你的标签是“自关闭的”（他只知道HTML标签），这就是为什么它有一个奇怪的行为

在上，您可以找到“元素”部分：

无效元素是一种元素，其内容模型在任何情况下都不允许它拥有内容

以下是HTML中的void元素的完整列表：
区域、基础、br、col、命令、嵌入、hr、img、输入、密钥生成、链接、元、参数、源、跟踪、wbr

非void元素必须有一个结束标记，除非本参考的HTML元素部分中该元素的小节指示可以省略其结束标记

因此，结论是：不要使用缩写形式作为您自己的标签

在浏览器中解释您自己的自关闭标记
这种奇怪的行为之所以出现，是因为浏览器将一个自关闭标记解释为之后所有兄弟姐妹的父标记

让我们暂时忽略盎格鲁JS，让我们考虑3个不在HTML中的新标签：<代码> <代码>，<代码> <代码>和<代码> <代码> > 
例如：



将按原样出现在源代码中（在Chrome中为F12）

但是



将看起来像：

<x></x>
<y>
    <z></z>
</y>



现在，他们有了这些信息，让我们回到AngularJS：

<my-element />
<my-element></my-element>



变成

<my-element>
    <my-element></my-element>
</my-element>



“main”=parent
被找到并替换为
你好，元素
 
=>一个输出行=>在这种情况下，您还可以在第二行代码后面有一些文本或其他标记，因为它们将被包装在父代码中，结果将是相同的

但另一方面：

<my-element></my-element>
<my-element />



将成为

<my-element></my-element>
<my-element></my-element>



这将显示两次。
作为先前答案的补充，这将更好地了解发生了什么。在jsfiddle中运行这个

自动关闭标签被认为是起始标签，下面的所有文本被认为是指令的内容


angular.module（'app'，[]）；
角度。模块（'app'）
.指令（'myElement'，函数（）{
返回{
限制：'E'，
是的，
作用域：{}，
模板：“你好，元素！
”
};
});

jfdsfkl
jfdsfkl
jfdsfkl
HTML5中不存在自动关闭标记，这是无效的标记。是的，这与浏览器“学习标记”无关。
<my-element></my-element>
<my-element />

<my-element></my-element>
<my-element></my-element>