Ошибка: [$ sce: itype] Попытка доверять нестрочному значению в содержимом, требующем строку: Context: html, при отображении символов валюты

Question

Я пытаюсь отображать символы валюты, используя их юникоды в angularjs. Я создал массив юникодов и использовал ng-repeat для отображения каждого символа валюты. Я также использовал Strict Contextual Escaping, но я получаю Error: [$ sce: itype] Попытка доверять нестрочному значению в содержимом, требующем строку: Context: html

Это мой index.html.

<div ng-app="myApp"> 
    <div ng-controller="myCtrl"> 
    <p ng-repeat="currency in currencies"> 
     <span data-ng-bind-html="currency | toHtml"></span> 
    </p> 
    </div> 
</div> 

Это мой app.js

angular.module('myApp', []) 
    .filter('toHtml', function($sce) { 
     return function(input) { 
     return $sce.trustAsHtml(input); 
    } 
}) 
.controller('myCtrl', function($scope, $sce) { 
    $scope.currencies = $sce.trustAsHtml(['U+20B9', 'U+20AC', 'U+0024']); 
}); 

Answer 1

Attempted to trust a non-string value in a content requiring a string: Context: html

Вы пытаетесь вызвать $sce.trustAsHtml на массив. Его можно вызвать только в строке.

Вы должны вызвать его на каждом значении Юникода вместо того, чтобы пытаться вызвать его на весь массив:

var currencies = []; 
var unicodes = ['U+20B9', 'U+20AC', 'U+0024']; 

angular.forEach(unicodes, function(uc) { 
    currencies.push($sce.trustAsHtml(uc)); 
}); 

$scope.currencies = currencies;