angularJs中添加过滤器显示Html代码

我们测试后发现高亮显示的html代码原样输出,这是angularJS为了防止html攻击采取的安全机制。我们如何在页面上显示html的结果呢?我们会用到$sce服务的trustAsHtml方法来实现转换。

因为这个功能具有一定通用性,我们可以通过angularJS的过滤器来简化开发,这样只写一次,调用的时候就非常方便了,看代码:

修改base.js
// 定义模块:

var app = angular.module("pinyougou",[]);

/*$sce服务写成过滤器*/

app.filter('trustHtml',['$sce',function($sce){

    return function(data){

        return $sce.trustAsHtml(data);

    }

}]);

使用过滤器
ng-bind-html指令用于显示html内容

竖线 |用于调用过滤器

<div class="attr" ng-bind-html="item.title | trustHtml"></div>

|就是竖线,看起来有点斜是因为字体原因。
 

猜你喜欢

转载自blog.csdn.net/qq_42809504/article/details/83018302
今日推荐