背景
今天测试人员测试出来一个显示数据的页面，没有换行。
原因剖析
这个页面是从一个<textarea>的页面拿到的数据，存到数据库中后再返回来的。
1.
知道这点之后，就有了调查方向了：先查看从数据库取出来的数据是否有换行的标识，经过调试发现确实有（chrome换行符显示的是一个回车键的图标）
2.
既然有换行符，那么就是存取数据都是原模原样的，那么在显示的时候除了问题，那么是不是<span>的问题，经过一番调查，span确实不能直接处理换行符，需要替换为<br />，这个是html换行标记了
于是使用正则替换str.replace(/\n/g,"<br />")，结果把要显示的内容的换行符替换为了<br />，但是还是直接显示了出来，并没有达到换行的目的，这个时候自己都怀疑是不是<span>不支持<br />，于是用了<div>替换了<span>标记，一样的没有换行。
3.
这个时候，基本上猜测就是angularjs转义了，之后又查了资料，发现<pre>标记可以使用，这个标记的描述是对原有内容原模原样的显示出来，也就是说<pre>可以直接的显示<textarea>的原始值，事实证明就是这样子的，但是它出现了一个黑灰色的背景框，这个可不是我想要的。
4.
既然是angularjs转义的，那么肯定有原始的解决方案，真让自己找到了，就是使用ng-bind-html指令，可是这个页面直接提示这个是一个不安全的操作，都提供了这个指令了，还提示安全问题，那么肯定有对策，果然让自己找到了，必须配合$sce服务使用
最终解决方案
-
使用
<pre>直接显示值，就是有背景。<pre>{{data}}</pre> -
在页面中使用ng-bind-html指令配合$sce
//js
app.filter('trustHtml',function($sce){
return function(input){
return $sce.trustAsHtml(input.replace(/ /g,' ').replace(/\n/g,'<br />'));
};
});
//html
<span ng-bind-html="data | trustHtml"><span>
回顾
自己出错的地方
-
<span>标记不支持<br /> - 先处理的
<br />的标记，之后才处理了空格
没有考虑的地方
- 空格的处理没有考虑到
- 先处理空格和转义字符的结果是不同的。
知识点
- angularjs把赋值都进行了转义
-
<testarea>直接支持换行 -
<pre>标记也支持换行 -
<textarea>的换行符是\n - angularjs使用
ng-bind-html指令显示html的值 - html的直接支持是危险的，所以要使用
$sce.trustAsHtml方法进行手动信任一次。 -
/\n/只能替换第一个换行符，//g是替换所有的(g代表global)。 - angularjs的filter是返回一个函数，且第一个参数是输入的值
扩展
- 注意转义的问题。
- 注意一些标签是支持换行、空格的。
-
$sce.trustAsHtml处理html，因为看到了As，那么也就支持其他的AsXXX方法了，有哪些？ - filter的4中用法：
{{data | filter1}},ng-bind-html="data | fitler1",fitler1(data),$filter('fitler1')(data) - filter的多个参数的形式是一样的。
- linux 管道
|符号的概念：把前面的结果当做后面的输入的参数