Angular.js數(shù)據(jù)綁定時自動轉(zhuǎn)義html標簽及內(nèi)容的示例分析-創(chuàng)新互聯(lián)

這篇文章主要介紹Angular.js數(shù)據(jù)綁定時自動轉(zhuǎn)義html標簽及內(nèi)容的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)昆明,十余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

angularJS在進行數(shù)據(jù)綁定時默認是以字符串的形式數(shù)據(jù)，也就是對你數(shù)據(jù)中的html標簽不進行轉(zhuǎn)義照單全收，這樣提高了安全性，防止html標簽的注入攻擊，但有時候需要，特別是從數(shù)據(jù)庫讀取帶格式的文本時，無法正常的顯示在頁面中。

而要對html進行轉(zhuǎn)義，則需要在數(shù)據(jù)綁定的html標簽中使用ng-bind-html屬性，該屬性依賴與$sanitize，也就是需要引入angular-sanitize.js文件，并在module定義時注入該服務(wù)ngSanitize。比如：

html:

<span ng-controller = "myCtr" ng-bind-html = "htmlStr"></span>

javascript:

function myCtr($scope){

　　$scope.htmlStr = '<p ></p>';

};

這樣可以實現(xiàn)html轉(zhuǎn)義，但是有個問題是style這種標簽會被angularJS認為是不安全的所以統(tǒng)統(tǒng)自動過濾掉，而為了保留這些就需要開啟非安全模式。

如何讓自動加載的數(shù)據(jù)轉(zhuǎn)義html標簽?zāi)?？實際上還有一種綁定方式：

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的形式進行解析并返回。將此過濾器添加到ng-bind-html所綁定的數(shù)據(jù)中，便實現(xiàn)了在數(shù)據(jù)加載時對與html標簽的自動轉(zhuǎn)義。

以上是“Angular.js數(shù)據(jù)綁定時自動轉(zhuǎn)義html標簽及內(nèi)容的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文名稱：Angular.js數(shù)據(jù)綁定時自動轉(zhuǎn)義html標簽及內(nèi)容的示例分析-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://muchs.cn/article26/pdhcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、品牌網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、搜索引擎優(yōu)化、關(guān)鍵詞優(yōu)化、App設(shè)計

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容