AngularJS和材质图标

Question

材质图标在我的AngularJS应用程序中工作正常。

在我的模板中.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: ""},
{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
})