angularJS中ng-bind-html指令怎么用

本篇內(nèi)容介紹了“angularJS中ng-bind-html指令怎么用”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

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

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

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

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

原因是這樣的：

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

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

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

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

//注冊一個過濾器，掛載到任意一個angular.module下，如果自定義過濾器較多，可以提取出來一個公用的過濾器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的形式進行解析并返回。將此過濾器添加到ng-bind-html所綁定的數(shù)據(jù)中，便實現(xiàn)了在數(shù)據(jù)加載時對于html標簽的自動轉(zhuǎn)義。

“angularJS中ng-bind-html指令怎么用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！