AngularJS 错误：带有 SVG 的 [$interpolate:noconcat]答案

【问题标题】：AngularJS Error: [$interpolate:noconcat] with SVGAngularJS 错误：带有 SVG 的 [$interpolate:noconcat]
【发布时间】：2017-06-22 03:07:09
【问题描述】：

Angular 新手 (1.6.1)。尝试做这样的事情：

<li ng-repeat='thing in list'>
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-{{ thing.icon }}"></use></svg>
</li>

基本上我想根据“thing.icon”的值来确定使用哪个 SVG sprite。

但是 Angular 给了我“错误：[$interpolate:noconcat]”，它说这是针对 XSS 的安全保护：https://docs.angularjs.org/error/$interpolate/noconcat

关于如何避免这种情况和/或更好的方法有什么想法吗？谢谢！

【问题讨论】：

【解决方案1】：

我也遇到了这个问题，通过添加带有xlink:href 内容的ng-href 而将xlink:href 留空来解决这个问题。通过 mathewbyrne 在此问题上的解决方法：https://github.com/angular/angular.js/issues/7697

那就试试吧：

<li ng-repeat='thing in list'>
<svg class="icon" aria-hidden="true"><use ng-href="#icon-{{ thing.icon }}" xlink:href=""></use></svg>
</li>

【讨论】：