我遇到了一个奇怪的问题。这不像是在阻止某些东西,但我认为理解这种行为会更好。我在 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 标记,如果您使用单独的语句关闭它们,但如果您以简短的方式编写它 - 它必须是每个容器一个才能工作。这是为什么?是否有我遗漏但应该知道的基本知识?
最佳答案
本质上,您不能在 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>
关于html - AngularJS 中的 ng-include 标签和 SVG 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28557804/