背景
今天測試人員測試出來一個顯示數(shù)據(jù)的頁面，沒有換行谤逼。
原因剖析
這個頁面是從一個<textarea>的頁面拿到的數(shù)據(jù)贵扰，存到數(shù)據(jù)庫中后再返回來的。
1.
知道這點(diǎn)之后流部，就有了調(diào)查方向了：先查看從數(shù)據(jù)庫取出來的數(shù)據(jù)是否有換行的標(biāo)識戚绕，經(jīng)過調(diào)試發(fā)現(xiàn)確實(shí)有（chrome換行符顯示的是一個回車鍵的圖標(biāo)）
2.
既然有換行符，那么就是存取數(shù)據(jù)都是原模原樣的贵涵，那么在顯示的時候除了問題列肢，那么是不是<span>的問題恰画，經(jīng)過一番調(diào)查，span確實(shí)不能直接處理換行符瓷马，需要替換為<br />拴还，這個是html換行標(biāo)記了
于是使用正則替換str.replace(/\n/g,"<br />")，結(jié)果把要顯示的內(nèi)容的換行符替換為了<br />欧聘，但是還是直接顯示了出來片林，并沒有達(dá)到換行的目的，這個時候自己都懷疑是不是<span>不支持<br />怀骤，于是用了<div>替換了<span>標(biāo)記费封，一樣的沒有換行。
3.
這個時候蒋伦，基本上猜測就是angularjs轉(zhuǎn)義了弓摘，之后又查了資料，發(fā)現(xiàn)<pre>標(biāo)記可以使用痕届，這個標(biāo)記的描述是對原有內(nèi)容原模原樣的顯示出來韧献，也就是說<pre>可以直接的顯示<textarea>的原始值，事實(shí)證明就是這樣子的研叫，但是它出現(xiàn)了一個黑灰色的背景框锤窑，這個可不是我想要的。
4.
既然是angularjs轉(zhuǎn)義的嚷炉，那么肯定有原始的解決方案渊啰，真讓自己找到了，就是使用ng-bind-html指令申屹，可是這個頁面直接提示這個是一個不安全的操作绘证，都提供了這個指令了，還提示安全問題独柑，那么肯定有對策迈窟，果然讓自己找到了，必須配合$sce服務(wù)使用
最終解決方案
-
使用
<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>標(biāo)記不支持<br /> - 先處理的
<br />的標(biāo)記曲稼，之后才處理了空格
沒有考慮的地方
- 空格的處理沒有考慮到
- 先處理空格和轉(zhuǎn)義字符的結(jié)果是不同的索绪。
知識點(diǎn)
- angularjs把賦值都進(jìn)行了轉(zhuǎn)義
-
<testarea>直接支持換行 -
<pre>標(biāo)記也支持換行 -
<textarea>的換行符是\n - angularjs使用
ng-bind-html指令顯示html的值 - html的直接支持是危險的，所以要使用
$sce.trustAsHtml方法進(jìn)行手動信任一次贫悄。 -
/\n/只能替換第一個換行符瑞驱，//g是替換所有的(g代表global)。 - angularjs的filter是返回一個函數(shù)窄坦，且第一個參數(shù)是輸入的值
擴(kuò)展
- 注意轉(zhuǎn)義的問題唤反。
- 注意一些標(biāo)簽是支持換行凳寺、空格的。
-
$sce.trustAsHtml處理html彤侍，因?yàn)榭吹搅薃s肠缨，那么也就支持其他的AsXXX方法了，有哪些盏阶？ - filter的4中用法：
{{data | filter1}},ng-bind-html="data | fitler1",fitler1(data),$filter('fitler1')(data) - filter的多個參數(shù)的形式是一樣的晒奕。
- linux 管道
|符號的概念：把前面的結(jié)果當(dāng)做后面的輸入的參數(shù)
