angularjs 1.5 - 在括号中打印十六进制 html 特殊字符

Question

我是 angular 的新手，我将近一周前开始使用，但有些功能我还不是很了解...所以请多关照。我想在 ng-repeat 中绑定一些十六进制代码（例如来自 icomoon），但突然 "fantastic" angular 失败了：

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 元素，这是我不想要的...（如果我不在 <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>

我们将不胜感激！谢谢。注意 - ng-bind-html-unsafe 已弃用。

Answer 1

我在某处发现 unicode 字符是解决方案。代替 html 实体写入 unicode 字符：

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

秘密是&#x<charcode> -> \u<charcode>。也许这对任何寻找这个简单成就的人都有帮助！再见

angularjs 1.5 - 在括号中打印十六进制 html 特殊字符

angularjs 1.5 - print hex html special char in brackets

hex

special-characters

angularjs

angularjs-ng-repeat