angularJS繫結資料中對標籤轉義的處理

2021-09-08 19:49:20 字數 714 閱讀 7399

一、問題

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

二、解決辦法

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

2、建立乙個filter

($sce)

});//

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

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

三、其他

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

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

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

();

return

filter;

});//

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

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

AngularJS資料繫結

資料繫結指angularjs 資料模型與html檢視之間資料的繫結,是同步繫結 資料模型 angularjs應用程式通常有乙個資料模型,功能是給應用程式提供資料集合 如 scope.firstname john scope.lastname doe html檢視 指angularjs應用程式所在的容...

flex繫結資料

在使用flex開發的過程中,資料繫結是一定會遇到的,這種技術簡單,又有點好玩,重要的是它讓開發變得簡單了。在flex中,資料繫結的方式有這麼三種 示例1中的繫結方式即是第一種繫結方式,在 中直接填寫inputunit.text,表示label顯示的內容和textinput是關聯的,它會隨著texti...

HighChat動態繫結資料 資料後台繫結(三)

今天看了幾位大佬的部落格,學到了一些,現在分享一下,也作為以後的參考 不多說看 1.後台 public actionresult ajax2 reportdata.categories key double?value double?value1 reportitem ri1 new reporti...