angularJS的ng-bind-html指令這么用

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

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

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

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

　　hello,這是一個例子（我們給文字設置的b標簽樣式丟失了）

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

　　原因是這樣的：

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

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

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

　　來看看如何使用吧：

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

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

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

　　};

　　}]);//然后在頁面中這樣使用<png-bind-html="article.text|to_trusted"></p>

　　$sce是angularJS自帶的安全處理模塊，$sce.trustAsHtml(input)方法便是將數據內容以html的形式進行解析并返回。將此過濾器添加到ng-bind-html所綁定的數據中，便實現了在數據加載時對于html標簽的自動轉義。

讀到這里，這篇“angularJS的ng-bind-html指令這么用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。