本文小編為大家詳細(xì)介紹“angularJS的ng-bind-html指令這么用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“angularJS的ng-bind-html指令這么用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

站在用戶的角度思考問題，與客戶深入溝通，找到南鄭網(wǎng)站設(shè)計(jì)與南鄭網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、申請域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋南鄭地區(qū)。

angularjs的強(qiáng)大之處之一就是他的數(shù)據(jù)雙向綁定這個(gè)功能，我們會常常用到的兩個(gè)東西就是ng-bind和針對form的ng-model。但在我們的項(xiàng)目當(dāng)中會遇到這樣的情況，后臺返回的數(shù)據(jù)中帶有各種各樣的html標(biāo)簽。如：

$scope.text=“hello,
這是一個(gè)例子”

我們用ng-bind-html這樣的指令來綁定，結(jié)果卻不是我們想要的。是這樣的：

hello,這是一個(gè)例子（我們給文字設(shè)置的b標(biāo)簽樣式丟失了）

調(diào)試了半天，最后鎖定問題并解決問題。，不過辛苦還是值得的，畢竟為了弄明白這一點(diǎn)又學(xué)習(xí)了更多代碼。

原因是這樣的：

angularJS在進(jìn)行數(shù)據(jù)綁定時(shí)默認(rèn)是會以文本的形式輸出，也就是對你數(shù)據(jù)中的html標(biāo)簽不進(jìn)行轉(zhuǎn)義照單全收，這樣提高了安全性，防止了html標(biāo)簽中的注入攻擊。但是如果我們的應(yīng)用場景，是類似于文章詳情頁，從數(shù)據(jù)庫讀取帶格式的文本時(shí)，無法正常的顯示在頁面中。如下：

$scope.htmlStr='

這個(gè)時(shí)候我們必須要使用$sce這個(gè)服務(wù)來解決我們的問題。所謂sce即“StrictContextualEscaping”的縮寫。翻譯成中文就是“嚴(yán)格的上下文模式”也可以理解為安全綁定吧。該方法將值轉(zhuǎn)換為特權(quán)所接受并能安全地使用“ng-bind-html”來綁定。

來看看如何使用吧：

把它封裝成一個(gè)過濾器就可以在模板上隨時(shí)調(diào)用了

//注冊一個(gè)過濾器，掛載到任意一個(gè)angular.module下，如果自定義過濾器較多，可以提取出來一個(gè)公用的過濾器module

.filter('to_trusted',['$sce',function($sce){returnfunction(text){return$sce.trustAsHtml(text);

};

}]);//然后在頁面中這樣使用

$sce是angularJS自帶的安全處理模塊，$sce.trustAsHtml(input)方法便是將數(shù)據(jù)內(nèi)容以html的形式進(jìn)行解析并返回。將此過濾器添加到ng-bind-html所綁定的數(shù)據(jù)中，便實(shí)現(xiàn)了在數(shù)據(jù)加載時(shí)對于html標(biāo)簽的自動(dòng)轉(zhuǎn)義。

讀到這里，這篇“angularJS的ng-bind-html指令這么用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。