javascript - 为什么 Angular 区分 `` 和 `` ？

Question

我刚刚发现了 Angular 1.2.1 的一个奇怪问题，在 this fiddle 中进行了演示。 (在 IE、FF 和 Chrome 中测试):如果我创建一个非常简单的模板化指令，它无法像 <my-element /> 那样工作。如果它没有首先被用作 <my-element></my-element> .

这是来自 fiddle 的完整 js 代码:

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

和 html:

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

我期望的输出是两段内容为 Hello, element! ，但我只有一个。但是，如果我颠倒这两个 <my-element> 的顺序-tags，以便自动关闭的标 checkout 现在后面，它们都给出输出。

为什么 Angular 会以这种病态的方式表现？

Answer 1

不应使用您自己的自闭标签

浏览器解释标签是否“可自关闭”。

它不知道你的标签是“self-closeable”(他只知道 HTML 标签)，这就是为什么它有一个奇怪的行为。

关于 www.w3.org你可以找到元素部分:

A void element is an element whose content model never allows it to have contents under any circumstances.

The following is a complete list of the void elements in HTML:area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

A non-void element must have an end tag, unless the subsection for that element in the HTML elements section of this reference indicates that its end tag can be omitted....

因此，结论是:不要将缩写形式用于您自己的标签。

在浏览器中解释自己的自闭标签

之所以出现这种奇怪的行为，是因为浏览器将自闭标签解释为所有 sibling 的父级，在它之后。。 p>

让我们暂时忽略 AngularJS，让我们考虑 3 个不在 HTML 中的新标签:<x> , <y>和 <z> .

例如:

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

将按原样出现在源代码中(在 Chrome 中为 F12)。

但是

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

看起来像:

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

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

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

成为

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

和“主要”= parent <my-element>找到并替换为 <p>Hello, element!</p> . => 一个输出行 => 在这种情况下，您还可以在第 2 行代码之后添加一些文本或其他标记，因为它们将被包裹在父级中并且结果是相同的。

但是，另一方面:

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

会变成

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

将显示 2 次。