angular ng bind處理HTML轉義

2021-10-04 03:18:13 字數 1421 閱讀 3365

一、問題

預設情況下,angularjs繫結的資料為字串文字,不會對其中包含的html標籤進行轉義生成格式化的文字。在實際工作時碰到介面返回的資料帶有html格式時該如何處理。

二、解決辦法

1、引入angular-sanitize.js檔案,並在module定義時注入服務ngsanitize。(為了能使用ng-bind-html屬性)

module(,

['nganimate'])

2、建立乙個filter

filter

('trusthtml'

,function

($sce)})

;//$sce是angularjs自帶的安全處理模組,$sce.trustashtml(input)方法便是將資料內容以html的形式進行解析並返回。

3、將此過濾器新增到ng-bind-html所繫結的資料中,便實現了在資料載入時對於html標籤的自動轉義。

="temp-view-content" ng-bind-html=

"tempitem.content | trusthtml"

>

<

/div>

三、其他

本來到此,問題已經解決了。但是在實際運用中發現了另外乙個小坑。某資料只在前端建立,在textarea裡編輯完並儲存後,從資料庫裡讀出來的格式與建立時不一致。

後來發現是由於textarea裡的換行是\n指令控制,上傳資料即為\n格式,讀到html裡後,需要把\n轉換為

,解決的辦法依舊採用filter。

.filter

('trusthtml',[

'$sce'

,function

($sce);}

])//此過濾器將textarea裡的\n和空格替換為html可以識別的標籤

="temp-view-content" ng-bind-html=

"tempitem.content | ntobr | trusthtml"

>

<

/div>

//在繫結資料時只需要同時加入兩個過濾器即可

四、也可以不轉義\n

標籤;

使用pre標籤就可以顯示 \n 的換行功能;

注:此方法對繫結資料中的img標籤無效

="temp-view-content"

>

<

/pre>

<

/div>

標籤會超出文字框的內容;

解決方法;強制換行;

"white-space: pre-wrap; word-wrap: break-word;"

>

<

/span>

海量處理處理

1.單詞統計 假設你只有一台記憶體2g的筆記本,i5的四核cpu以及4t的硬碟,請設計乙個程式,實現對1t英文資料進行詞頻分析,完成以下兩個小題 1 求所有詞的詞頻,把相應的值存入檔案 2 找出這些詞裡賣弄出現頻次最高的100個詞,並用 實現 名詞解釋 1t 1024g,為硬碟空間單位,詞頻,每個單...

批處理 sleep處理

echo off echo q debug nul echo bj jzh 0x ppppppa de dm do dh ls lu lx lezrr eeeuyrx2dx sleep.com echo 0dxfp,0xx.t0p,xtgsb4o piyu wwx0gwuy wv ovbx2gv0e...

批處理和自動處理

by 李笑來 on 2009 11 23 in auto it 批處理 batch 是dos時代的概念,即 批量處理一連串的指令 到了windows時代,人們開始更多地使用 自動處理 automation 這個概念。不過,總體上是差不多的,反正就是為了提高效率而想辦法讓計算機 自動 工作。先嚐嚐鮮,...