AngularJs - html 渲染

Question

我们使用弹性搜索荧光笔并从荧光笔中获取以下代码。

<span style='font-weight:bold;color:red;'>Baskar</span> Test

我们在html中显示结果如下。

                     <tr
                        ng-repeat="result in searchModelResult">                        
                        <td><p ng-bind-html="result.name"></p></td>                     
                    </tr>

我已经包含了 sanitize.js 并在 Angular 模块中添加了 ngSanitize。我仍然没有看到像红色字体和粗体字体这样的 html 效果。

我有什么遗漏吗？

谢谢， 巴斯卡尔.S

Answer 1

你需要做两件事，首先删除

{{result.name}}

正如丹尼尔所说...那么您需要对 angular 说以信任控制器中的该 html：

myApp.controller('MyCtrl', function ($scope, $sce) {
    $scope.result.name = $sce.trustAsHtml('<span style="font-weight:bold; color:red;">Baskar</span> Test');
});

可以查看$scehere的完整文档

如果您需要在 ng-repeat 中进行迭代，您可以创建一个过滤器：

myApp.filter('unsafe', function($sce) { return $sce.trustAsHtml; });

然后在视图中使用：

<tr ng-repeat="result in searchModelResult">                        
    <td><p ng-bind-html="result.name | unsafe"></p></td>                     
</tr>

Answer 2

您需要删除第二个绑定表达式：

{{result.name}}

它看起来覆盖了来自ng-bind-html 的绑定，并且默认绑定将HTML 转义字符串。