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>

但这会导致无法读取属性＆＃39; insertBefore＆＃39;为null 错误，只有第一张图片显示在页面上：

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

基本上，如果使用单独的语句关闭它们，则可以在一个容器中使用多个ng-include标记，但如果以简短的方式编写它，则每个容器必须使用一个。这是为什么？我有什么基本的东西，我想知道并且应该知道吗？

Answer 1

基本上，您无法在HTML中定义自己的void / self-closing标签。如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>