小編給大家分享一下angularJS中ng-bind-html指令的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)是一家專(zhuān)業(yè)提供萊蕪企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、H5開(kāi)發(fā)、小程序制作等業(yè)務(wù)。10年已為萊蕪眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

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

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

我們用ng-bind-html這樣的指令來(lái)綁定，結(jié)果卻不是我們想要的。是這樣的：
hello,這是一個(gè)例子（我們給文字設(shè)置的b標(biāo)簽樣式丟失了）

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

原因是這樣的：

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

$scope.htmlStr = '<p style="color:red;font-size=18px;"></p>';

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

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

//注冊(cè)一個(gè)過(guò)濾器，掛載到任意一個(gè)angular.module下，如果自定義過(guò)濾器較多，可以提取出來(lái)一個(gè)公用的過(guò)濾器module
    .filter('to_trusted', ['$sce', function ($sce) {        return function (text) {            return $sce.trustAsHtml(text);
        };
    }]);//然后在頁(yè)面中這樣使用<p ng-bind-html="article.text | to_trusted"></p>

$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)義。

以上是“angularJS中ng-bind-html指令的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：angularJS中ng-bind-html指令的示例分析
文章來(lái)源：http://chinadenli.net/article40/ihihho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、網(wǎng)站策劃、網(wǎng)站內(nèi)鏈、虛擬主機(jī)、App開(kāi)發(fā)、做網(wǎng)站

廣告

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