詳解Angular.js數(shù)據(jù)綁定時(shí)自動(dòng)轉(zhuǎn)義html標(biāo)簽及內(nèi)容
angularJS在進(jìn)行數(shù)據(jù)綁定時(shí)默認(rèn)是以字符串的形式數(shù)據(jù)，也就是對(duì)你數(shù)據(jù)中的html標(biāo)簽不進(jìn)行轉(zhuǎn)義照單全收，這樣提高了安全性，防止html標(biāo)簽的注入攻擊，但有時(shí)候需要，特別是從數(shù)據(jù)庫(kù)讀取帶格式的文本時(shí)，無法正常的顯示在頁(yè)面中。
而要對(duì)html進(jìn)行轉(zhuǎn)義，則需要在數(shù)據(jù)綁定的html標(biāo)簽中使用ng-bind-html屬性，該屬性依賴與$sanitize，也就是需要引入angular-sanitize.js文件，并在module定義時(shí)注入該服務(wù)ngSanitize。比如：
html:
<span ng-controller = "myCtr" ng-bind-html = "htmlStr"></span>
javascript:
function myCtr($scope){
$scope.htmlStr = '<p style="color:white;background:#f60;"></p>';
};
這樣可以實(shí)現(xiàn)html轉(zhuǎn)義，但是有個(gè)問題是style這種標(biāo)簽會(huì)被angularJS認(rèn)為是不安全的所以統(tǒng)統(tǒng)自動(dòng)過濾掉，而為了保留這些就需要開啟非安全模式。
如何讓自動(dòng)加載的數(shù)據(jù)轉(zhuǎn)義html標(biāo)簽?zāi)兀繉?shí)際上還有一種綁定方式：
html：
<div ng-repeat = "article in articles">
<div class="panel-heading">
<h4><b>{{article.title}}</b></h4>
</div>
<div class="panel-body">
<article id="word-display" ng-bind-html="article.content | trustHtml">
</article>
</div>
</div>
javascript:
success(function(data){
$scope.articles = data;
});
myApp.filter('trustHtml',function($sce){
return function(input){
return $sce.trustAsHtml(input);
}
});
其中$sce是angularJS自帶的安全處理模塊，$sce.trustAsHtml(input)方法便是將數(shù)據(jù)內(nèi)容以html的形式進(jìn)行解析并返回。將此過濾器添加到ng-bind-html所綁定的數(shù)據(jù)中，便實(shí)現(xiàn)了在數(shù)據(jù)加載時(shí)對(duì)與html標(biāo)簽的自動(dòng)轉(zhuǎn)義。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- AngularJs定時(shí)器$interval 和 $timeout詳解
- Angular.js中定時(shí)器循環(huán)的3種方法總結(jié)
- AngularJS定時(shí)器的使用與移除操作方法【interval與timeout】
- Angularjs 雙向綁定時(shí)字符串的轉(zhuǎn)換成數(shù)字類型的問題
- angularjs定時(shí)任務(wù)的設(shè)置與清除示例
- AngularJS實(shí)現(xiàn)頁(yè)面定時(shí)刷新
- angular2倒計(jì)時(shí)組件使用詳解
- ionic+AngularJs實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕
- AngularJS 支付倒計(jì)時(shí)功能實(shí)現(xiàn)思路
- Angular實(shí)現(xiàn)的簡(jiǎn)單定時(shí)器功能示例
相關(guān)文章
AngularJS基礎(chǔ) ng-mouseenter 指令示例代碼
本文主要介紹AngularJS ng-mouseenter 指令,這里對(duì)ng-mouseenter 指令基礎(chǔ)資料做了詳細(xì)整理,并附代碼實(shí)例,有需要的小伙伴可以參考下2016-08-08
AngularJS中取消對(duì)HTML片段轉(zhuǎn)義的方法例子
這篇文章主要介紹了AngularJS中取消對(duì)HTML片段轉(zhuǎn)義的方法例子,在一些需要顯示HTML的地方,就要取消AngularJS的轉(zhuǎn)義,本文就介紹了這種方法,需要的朋友可以參考下2015-01-01
angular 組件通信的幾種實(shí)現(xiàn)方式
這篇文章主要介紹了angular 組件通信的幾種實(shí)現(xiàn)方式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
Angular 4環(huán)境準(zhǔn)備與Angular cli創(chuàng)建項(xiàng)目詳解
Angular4.0來了，更小，更快，改動(dòng)少，所以下面這篇文章主要給大家介紹了關(guān)于Angular 4環(huán)境準(zhǔn)備與學(xué)會(huì)使用Angular cli創(chuàng)建項(xiàng)目的相關(guān)資料，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來一起看看吧。2017-05-05
AngularJS實(shí)現(xiàn)元素顯示和隱藏的幾個(gè)案例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)元素顯示和隱藏的幾個(gè)案例，需要的朋友可以參考下2015-12-12
AngularJS實(shí)現(xiàn)動(dòng)態(tài)添加Option的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)動(dòng)態(tài)添加Option的方法,涉及AngularJS事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05
本文介紹了其在AtScript、改善依賴入駐、Annotations、路由方案等方面的改變。雖然不知道打破原有是否是件好事，不過由于不向后兼容，我們需要為遷移做好計(jì)劃2016-02-02
AngularJS使用指令增強(qiáng)標(biāo)準(zhǔn)表單元素功能
這篇文章主要介紹了AngularJS使用指令增強(qiáng)標(biāo)準(zhǔn)表單元素功能，包括數(shù)據(jù)綁定、建立模型屬性、驗(yàn)證表單等，感興趣的小伙伴們可以參考一下2016-07-07
angularjs實(shí)現(xiàn)分頁(yè)和搜索功能
這篇文章主要介紹了angularjs實(shí)現(xiàn)分頁(yè)和搜索功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
詳解AngularJS如何實(shí)現(xiàn)跨域請(qǐng)求
跨域請(qǐng)求一直是網(wǎng)頁(yè)編程中的一個(gè)難題，在過去，絕大多數(shù)人都傾向于使用JSONP來解決這一問題。不過現(xiàn)在，我們可以考慮一下W3C中一項(xiàng)新的特性——CORS（Cross-Origin Resource Sharing）了。2016-08-08