您好,登錄后才能下訂單哦!
這篇文章主要介紹Angular.js數(shù)據(jù)綁定時(shí)自動(dòng)轉(zhuǎn)義html標(biāo)簽及內(nèi)容的示例分析,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
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í),無(wú)法正常的顯示在頁(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 ></p>'; };
這樣可以實(shí)現(xiàn)html轉(zhuǎn)義,但是有個(gè)問(wèn)題是style這種標(biāo)簽會(huì)被angularJS認(rèn)為是不安全的所以統(tǒng)統(tǒng)自動(dòng)過(guò)濾掉,而為了保留這些就需要開(kāi)啟非安全模式。
如何讓自動(dòng)加載的數(shù)據(jù)轉(zhuǎn)義html標(biāo)簽?zāi)???shí)際上還有一種綁定方式:
html:
<div ng-repeat = "article in articles"> <div class="panel-heading"> <h5><b>{{article.title}}</b></h5> </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)行解析并返回。將此過(guò)濾器添加到ng-bind-html所綁定的數(shù)據(jù)中,便實(shí)現(xiàn)了在數(shù)據(jù)加載時(shí)對(duì)與html標(biāo)簽的自動(dòng)轉(zhuǎn)義。
以上是“Angular.js數(shù)據(jù)綁定時(shí)自動(dòng)轉(zhuǎn)義html標(biāo)簽及內(nèi)容的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。