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> 

頁地方在控制器中定義爲：

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

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

爲什麼

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

不行？

Answer 1

使用ng-bind-html和不安全的過濾器：

templat.html

JS

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