AngularJS无法正确解析花括号

Question

 <li ng-repeat="appliance in appliances | limitTo:2"> <div class="icon"> <img src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg"> </div> <div class="label">{{ appliance.Label }}</div> </li> 

在AngularJS中，我可以在控制台中看到它尝试加载'/images/vector/Appliances/w-%7B%7Bappliance.DashboardIcon%7D%7D.svg'。 现在，我的ng-repeat效果很好。 如果我解码URIComponent，我会看到上面的％7B和％7D分别是'{'和'}'。 如何防止发生此错误？

Answer 1

在这里Use ng-src代替src

 <img ng-src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg">

在src属性中使用类似{{hash}}的Angular标记无法正常工作：浏览器将从URL提取文本文字{{hash}}，直到Angular替换{{hash}}中的表达式。 ngSrc指令解决了这个问题。

编写它的错误方式：

<img src="http://www.gravatar.com/avatar/{{hash}}" alt="Description"/>

正确的编写方式：

<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />\\

有关更多信息，请参见此链接https://docs.angularjs.org/api/ng/directive/ngSrc

Answer 2

您必须使用ng-src ，如果使用src，浏览器会尝试在加载angular之前加载图像，这就是ng-src存在的原因。

<img ng-src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg">