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>

其中页面在控制器中定义：

$scope.pages = [
{icon: "&#xE0B6;"},
{icon: "&#xE8F9;"},
{icon: "&#xE5CA;"}
];

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

为什么

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

不起作用？

Answer 1

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

<强> templat.html

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

<强> JS

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