首頁 > web前端 > html教學 > angularJS的ng-bind-html指令詳解

angularJS的ng-bind-html指令詳解

php中世界最好的语言
發布: 2018-03-08 10:21:39
原創
2138 人瀏覽過

這次帶給大家angularJS的ng-bind-html指令詳解,使用angularJS的ng-bind-html指令的注意事項有哪些,以下就是實戰案例,一起來看一下。

angular js的強大之處之一就是他的資料雙向綁定這個功能,我們會常常用到的兩個東西就是ng-bind和針對form的ng-model。但在我們的專案當中會遇到這樣的情況,後台回傳的資料中帶有各種各樣的html標籤。如:

$scope.text = “hello,<br><b> 这是一个例子</b>”
登入後複製

我們用ng-bind-html這樣的指令來綁定,結果卻不是我們想要的。是這樣的:
hello,這是一個例子(我們給文字設定的b標籤樣式丟失了)

#調試了半天,最後鎖定問題並解決問題。 ,不過辛苦還是值得的,畢竟為了弄清楚這一點又學習了更多程式碼。

原因是這樣的:

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

$scope.htmlStr = &#39;<p style="color:red;font-size=18px;"></p>&#39;;
登入後複製

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

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

//注册一个过滤器,挂载到任意一个angular.module下,如果自定义过滤器较多,可以提取出来一个公用的过滤器module
    .filter(&#39;to_trusted&#39;, [&#39;$sce&#39;, function ($sce) {        return function (text) {            return $sce.trustAsHtml(text);
        };
    }]);//然后在页面中这样使用<p ng-bind-html="article.text | to_trusted"></p>
登入後複製

$sce是angularJS自帶的安全處理模組,$sce.trustAsHtml(input)方法便是將資料內容以html的形式解析並回傳。將此過濾器加入ng-bind-html所綁定的資料中,便實現了在資料載入時對於html標籤的自動轉義。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

WEB的介面管理工具

#ionic應用程式里文字不能長按複製、貼上怎麼辦

#

以上是angularJS的ng-bind-html指令詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板