html - AngularJS 中的 ng-include 标签和 SVG 图像

Question

我遇到了一个奇怪的问题。这不像是在阻止某些东西，但我认为理解这种行为会更好。我在 AngularJS 中使用 ng-include 来包含 SVG 图像，这样我就可以用 CSS 设置它们的样式。

所以这段代码工作正常:

<ng-include src="'resources/svg/mastercard.svg'"></ng-include>
<ng-include src="'resources/svg/paypal.svg'"></ng-include>

这也很好用:

<span><ng-include src="'resources/svg/mastercard.svg'" /></span>
<span><ng-include src="'resources/svg/paypal.svg'" /></span>

但这会导致Cannot read property 'insertBefore' of null 错误并且只有第一张图片显示在页面上:

<ng-include src="'resources/svg/mastercard.svg'" />
<ng-include src="'resources/svg/paypal.svg'" />

基本上，您可以在一个容器中使用多个 ng-include 标记，如果您使用单独的语句关闭它们，但如果您以简短的方式编写它 - 它必须是每个容器一个才能工作。这是为什么？是否有我遗漏但应该知道的基本知识？

Answer 1

本质上，您不能在 HTML 中定义自己的无效/自关闭标签。这些数量有限，如 http://www.w3.org/html/wg/drafts/html/master/syntax.html#void-elements 所述。 :

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

此外，浏览器有效地忽略了 /> .因此，当您使用不在 void 元素列表中的元素时，例如 <ng-include ... ，例如在您的示例中(包装在 <div> 中)

<div>
  <ng-include src="'resources/svg/mastercard.svg'" />
  <ng-include src="'resources/svg/paypal.svg'" />
</div>

浏览器会解析为

<div>
  <ng-include src="'resources/svg/mastercard.svg'">
    <ng-include src="'resources/svg/paypal.svg'"></ng-include>
  </ng-include>
</div>

我怀疑这会导致您看到的错误。以下工作的原因

<span><ng-include src="'resources/svg/mastercard.svg'" /></span>
<span><ng-include src="'resources/svg/paypal.svg'" /></span>

是浏览器识别结束</span>必须关闭自打开以来打开的任何标签 <span> ，因此将其解析为:

<span><ng-include src="'resources/svg/mastercard.svg'"></ng-include></span>
<span><ng-include src="'resources/svg/paypal.svg'"></ng-include></span>