angularjs - AngularJS 和材质图标

Question

材质图标在我的 AngularJS 应用程序中运行良好。

在我的 template.html 中：

<i class="material-icons">&#xE86A;</i>

这工作正常，图标显示正确。

但是这段代码没有：

<div ng-repeat="x in pages">
    current icon : {{x.icon}}
    <br>
    <i class="material-icons">{{x.icon}}</i>
</div>

其中 pages 在控制器中定义：

$scope.pages = [
{icon: ""},
{icon: ""},
{icon: ""}
];

我可以看到 {{x.icon}} 的正确值。

为什么

<i class="material-icons">{{x.icon}}</i> 

不行 ？

Answer 1

使用ng-bind-html和不安全的过滤器：

模板.html

 <i class="material-icons" ng-bind-html="x.icon | unsafe "></i>

JS

app.filter('unsafe',function($sce){
  return $sce.trustAsHtml
})