我们测试后发现高亮显示的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>
|就是竖线,看起来有点斜是因为字体原因。