javascript - 显示货币符号时出现错误 : [$sce:itype] Attempted to trust a non-string value in a content requiring a string: Context: html,

Question

我正在尝试在 angularjs 中使用它们的 unicodes 显示货币符号。我创建了一个 unicode 数组，并使用 ng-repeat 来显示每个货币符号。我还使用了严格的上下文转义，但我收到错误:[$sce:itype] 尝试信任需要字符串的内容中的非字符串值:上下文: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。它只能在字符串上调用。

您需要在每个 unicode 值上调用它，而不是尝试在整个数组上调用它:

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

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

$scope.currencies = currencies;