Question

我是一个有角度的新人，我差不多一个星期前开始了，但有些功能我还不太了解......所以请善待。我想用ng-repeat来绑定一些十六进制代码（例如来自icomoon），但是突然之间出现了＃34;太棒了＆＃34;角度失败：

var app = angular.module("foooooods");

app.controller("foodController",['$scope','$http','$log',function($scope,$http,$log){

    $scope.meals = [
        {name:'colazione', id:1, font:"&#xe900;"},
        {name:'brunch', id:2, font:"&#xe901;"},
        {name:'pranzo', id:3, font:"&#xe902;"},
        {name:'snack', id:4, font:"&#xe903;"},
        {name:'cena', id:5, font:"&#xe904;"},
        {name:'dopo-cena', id:6, font:"&#xe905;"}
    ];
...

现在是html：

<div class="pasto" ng-repeat="(idmeal, meal) in meals">
    <label title="{{meal.name}}" class="af-font">
        {{meal.font}}
        <input type="radio" value="1"
            ng-model="fCtrl.tab"
            ng-change="fCtrl.openNewMeal(idmeal)">
    </label>
    <p>{{meal.name}}</p>
</div>

发生了什么事？ <div class="pasto">事实上已经重复，但{{meal.font}}被打印为纯文本。

然后我想出了一个过滤器：

app.filter('trust', ['$sce',function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
}]);

但现在我需要使用ng-bind-html创建一个额外的html元素，我不想要...（如果我不在{{1}中使用其他元素子元素我松开了它的内容），因为内联<label>的解决方案莫名其妙地无法解决。

{{meal.font | trust}}

帮助将不胜感激！谢谢。注意 - <label title="{{meal.name}}"> <span class="af-font" ng-bind-html="meal.font | trust"></span> <input type="radio" value="1" ng-model="fCtrl.tab" ng-change="fCtrl.openNewMeal(idmeal)"> </label>已弃用。

Answer 1

我发现某处unicode字符是解决方案。而不是一个html实体编写unicode char：

//not working
{name:'colazione', id:1, font:"&#xe900;"}
//perfectly working
{name:'colazione', id:1, font:"\ue900;"}

秘密是&#x<charcode> -> \u<charcode>。对于任何为这个简单的成就而言的人来说，这可能会有所帮助！再见

angularjs 1.5 - 在括号中打印hex hex html特殊字符

1 个答案: