angularJS绑定数据中对标签转义的处理二 与pre标签的使用

一、问题

默认情况下,angularJS绑定的数据为字符串文本,不会对其中包含的html标签进行转义生成格式化的文本。在实际工作时碰到接口返回的数据带有html格式时该如何处理。

二、解决办法
1、引入angular-sanitize.js文件,并在module定义时注入服务ngSanitize。(为了能使用ng-bind-html属性) var myApp = angular.module('myApp', ['ngAnimate']) 2、创建一个filter myApp.filter('trustHtml', function ($sce) {
return function (input) {
return $sce.trustAsHtml(input);
}
});
//$sce是angularJS自带的安全处理模块,$sce.trustAsHtml(input)方法便是将数据内容以html的形式进行解析并返回。 3、将此过滤器添加到ng-bind-html所绑定的数据中,便实现了在数据加载时对于html标签的自动转义。 <div ng-repeat="item in list" >
<div ng-bind-html="item.content |trustHtml"></div>
</div> 三、其他
本来到此,问题已经解决了。但是在实际运用中发现了另外一个小坑。某数据只在前端创建,在textarea里编辑完并保存后,从数据库里读出来的格式与创建时不一致。
后来发现是由于textarea里的换行是\n指令控制,上传数据即为\n格式,读到html里后,需要把\n转换为<br>,解决的办法依旧采用filter。 app.filter('ntobr', function(){
var filter = function(input){
return input.replace(/\n/g,"<\/br>").replace(/ /g,"&nbsp;");
};
return filter;
});
//此过滤器将textarea里的\n和空格替换为html可以识别的标签 <div ng-repeat="item in list" >
<div ng-bind-html="item.content | ntobr |trustHtml"></div>
</div>
//在绑定数据时只需要同时加入两个过滤器即可
四、也可以不转义\n 为<br>标签;
使用pre标签就可以显示 \n 的换行;功能;
<div ng-repeat="item in list" >
<pre ng-bind="item.content ></pre>
</div>
<pre>标签会超出文本框的内容;
解决方法;强制换行;
<pre style="white-space: pre-wrap;  word-wrap: break-word;"></span>
或者超出部分隐藏;overflow:hidden;

上一篇:WinRAR命令行


下一篇:sprite图在移动端的使用