Angular.js 直接輸出html

在使用富文本編輯時候，經(jīng)常會遇到把html通過模板賦值輸出到頁面的問題。在經(jīng)過后端處理之后，直接使用{{}}模板賦值輸出會得到帶”<>”的html標簽。

帶尖括號的html

這當然不是我們想要的效果。如果是用angular1，這時候就要用到ng-bind-html這個指令。

ng-bind-html指令

配合$sce.trustAsHtml使用，

$sce的使用

界面效果就出來了--

界面效果

如果使用的是angular2或者以上，要輸出html為內(nèi)容，過程也大同小異，用的是[innerHTML]這個指令

innerHTML指令的使用

配合DomSanitizer使用，


DomSanitizer的引入

自定義assembleHTML方法，


自定義assembleHTML方法

這樣就可以直接輸出為HTML了。

其他諸如此類的方法，例如圖片URL有unsafe：前綴。就可以用sanitizer.bypassSecurityTrustUrl(url)? ? 過濾一下。

sanitizer.bypassSecurityTrustScript(script)

sanitizer.bypassSecurityTrustStyle(style)

sanitizer.bypassSecurityTrustResourceUrl(rurl)

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容