一、问题
默认情况下,angularJS绑定的数据为字符串文本,不会对其中包含的html标签进行转义生成格式化的文本。在实际工作时碰到接口返回的数据带有html格式时该如何处理。
二、解决办法
1、引入angular-sanitize.js文件,并在module定义时注入服务ngSanitize。(为了能使用ng-bind-html属性,这里在html页面直接用ng-bind-html也可,不用配置过滤器,不行的话尝试过滤器)
1 var myApp = angular.module('myApp', ['ngSanitize'])
2、创建一个filter
1 myApp.filter('trustHtml', function ($sce) { 2 return function (input) { 3 return $sce.trustAsHtml(input); 4 } 5 }); 6 //$sce是angularJS自带的安全处理模块,$sce.trustAsHtml(input)方法便是将数据内容以html的形式进行解析并返回。
3、将此过滤器添加到ng-bind-html所绑定的数据中,便实现了在数据加载时对于html标签的自动转义
1 <div ng-repeat="item in list" > 2 <div ng-bind-html="item.content |trustHtml"></div> 3 </div>
三、其他
本来到此,问题已经解决了。但是在实际运用中发现了另外一个小坑。某数据只在前端创建,在textarea里编辑完并保存后,从数据库里读出来的格式与创建时不一致。后来发现是由于textarea里的换行是
指令控制,上传数据即为
格式,读到html里后,需要把
转换为<br>
,解决的办法依旧采用filter。
1 app.filter('ntobr', function(){ 2 var filter = function(input){ 3 return input.replace(/ /g,"</br>").replace(/ /g," "); 4 }; 5 return filter; 6 }); 7 //此过滤器将textarea里的 和空格替换为html可以识别的标签
1 <div ng-repeat="item in list" > 2 <div ng-bind-html="item.content | ntobr |trustHtml"></div> 3 </div> 4 //在绑定数据时只需要同时加入两个过滤器即可