情景:
一般我們寫代碼的時候需要渲染帶html結構的字符串十嘿。
實現:
使用ng-bind-html
可以實現激率。
ng-bind-html的坑:
ng-bind-html
這個指令會在運行過濾掉一些不安全的標簽來防止xxs攻擊,提高安全性宪肖。所以會導致你寫的字符串里的某些標簽比如<button></button>,<input/>
等不會顯示出來娜遵。
解決辦法:
-
ng-bind-html
指令是通過一個安全的方式將內容綁定到HTML元素上,該屬性依賴于$sanitize
镰吆,需要在項目中引入angular-sanitize.js文件,并在module定義時注入該服務ngSanitize蹬耘。 - 通過
ng-bind-html
指令綁定html元素,為什么還需要$sce
休里?
這是因為如果在angularjs中綁定的數據有html標簽時瞧剖,如上面的<input/>
,會被angularjs認為是不安全的而自動過濾掉,為了保留這些標簽就需要開啟非安全模式巾遭,這是非常危險的涨薪。$sce
是angularJS自帶的安全處理模塊,因此需要$sce.trustAsHtml()
方法將數據內容以html的形式解析并返回阳距。