Angular JS使用trustasHtml将字符串呈现为html时显示错误

时间:2019-06-12 06:42:29

标签: javascript html angularjs render

我有一个遗留应用程序,该应用程序的ui字段显示自定义文本。自定义文本现在也将需要呈现链接,因此我更改了文本呈现方式将其绑定为html,以便在有锚标记的情况下进行绑定在html中,它们在ui中呈现为链接。但是由于某种原因,它对我不起作用。

$scope.setActiveTab = function(newTab) {
    $scope.activeTab = newTab;
    $scope.activeTexts = $sce.trustAsHtml($scope.tabMap[newTab]);
}
<div class="row" ng-repeat="activeText in activeTexts">
    <div class="col--3"style="word-wrap : break-word"
         ng-bind-html="activeText.customText">
    </div>
</div>

使用上述代码时,由于某种原因,我在控制台中收到以下错误。我是angularJs的新手,我通读了文档,但找不到原因。

  

angular.js:11592错误:[$ sce:itype]尝试信任需要字符串的内容中的非字符串值:上下文:html

1 个答案:

答案 0 :(得分:0)

事实证明,$ sce.trustAsHtml()仅适用于字符串。当函数需要一个字符串参数时,我试图将其应用于数据数组。我能够通过遍历数据并对数组中的每个对象进行清理来克服这个问题。下面的代码为我修复了它:

$scope.setActiveTab = function(newTab) {
    $scope.activeTab = newTab;
    $scope.activeTexts = $sce.trustAsHtml($scope.tabMap[newTab]);

    for (var i=0; i < $scope.activeTexts.length; i++) {
        $scope.activeTexts[i].customText = $sce.trustAsHtml($scope.activeTexts[i].customText);
    }
}