javascript - 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

在这里使用 ng-src 代替 src

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

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

错误的写法:

<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