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

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

我們用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 = p >
這個(gè)時(shí)候我們必須要使用$sce這個(gè)服務(wù)來解決我們的問題。所謂sce即“Strict Contextual Escaping”的縮寫。翻譯成中文就是“嚴(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) { return function (text) { return $sce.trustAsHtml(text); }]);//然后在頁面中這樣使用 p ng-bind-html= article.text | to_trusted /p 
$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)簽的自動轉(zhuǎn)義。
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php 其它相關(guān)文章！
相關(guān)閱讀：
WEB的接口管理工具
ionic應(yīng)用里文字不能長按復(fù)制、粘貼怎么辦
以上就是angularJS的ng-bind-html指令詳解的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。