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>

但是这会导致无法读取null错误的属性"insertBefore",并且只有第一个图像显示在页面上:

<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,输入,keygen,链接,menuitem,元,参数,源,跟踪,wbr

此外,浏览器有效地忽略了/>.因此,当您使用不在void元素列表中的元素时,例如<ng-include ...,在您的示例中(包含在a中<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>