AngularJS通過$sce輸出html的方法
更新時間：2016年09月22日 08:58:29 作者：yangnianbing110
不知道大家有沒有發(fā)現(xiàn)在用AngularJS作為前端搭建個人博客的時候，發(fā)現(xiàn)用AngularJs輸出html的時候，瀏覽器并不解析這些html標(biāo)簽，這里我們需要其顯示angular輸出的html能被瀏覽器解析怎么辦呢？不知道Angularjs如何實現(xiàn)這種功能的通過這篇文章來看看吧。
【問題描述】
AngularJS的強大之處之一就是他的數(shù)據(jù)雙向綁定功能----->ng-bind和針對form的ng-model
但在我們的項目當(dāng)中會遇到這樣的情況，后臺返回的數(shù)據(jù)中帶有各種各樣的html標(biāo)簽
AngularJS輸出html的時候，瀏覽器并不解析這些html標(biāo)簽
通過api，發(fā)現(xiàn)通過指令 ng-bind-html來實現(xiàn)html的輸出。
<div class="col-md-12 ng-binding" ng-bind-html="item.content ">
但是并不起作用，瀏覽器中顯示的還是html代碼。
【解決辦法】
后來發(fā)現(xiàn)還需要通過通過$sce服務(wù)來實現(xiàn)html的展示。
angular.module("list",[]).controller("BlogListCtrl", BlogListCtrl).filter(
'to_trusted', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
}
}]
)
這里通過$sce構(gòu)建一個過濾器來對輸出的html進行過濾
<div class="col-md-12 ng-binding" ng-bind-html="item.content|to_trusted ">
這樣就可以通過AngularJS正常的輸出html標(biāo)簽，并且被瀏覽器解析了
【總結(jié)】
以上就是這篇文章的全部內(nèi)容了，希望這篇文章的內(nèi)容對大家的學(xué)習(xí)或者工作帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
基于Angular 8和Bootstrap 4實現(xiàn)動態(tài)主題切換的示例代碼
這篇文章主要介紹了基于Angular 8和Bootstrap 4實現(xiàn)動態(tài)主題切換的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
在 Angular2 中實現(xiàn)自定義校驗指令（確認密碼）的方法
這篇文章給大家探索 Angular 2 內(nèi)建的自定義驗證，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-01-01
AngularJS基礎(chǔ) ng-non-bindable 指令詳細介紹
本文主要講解AngularJS ng-non-bindable 指令,這里幫大家整理了ng-non-bindable指令的基本知識資料,有需要的小伙伴可以參考下2016-08-08
這篇文章主要介紹了angular多語言配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
使用Angular 6創(chuàng)建各種動畫效果的方法
Angular能夠讓我們創(chuàng)建出具有原生表現(xiàn)效果的動畫。我們將通過本文學(xué)習(xí)到如何使用Angular 6來創(chuàng)建各種動畫效果。在此，我們將使用Visual Studio Code來進行示例演示。感興趣的朋友跟隨小編一起看看吧2018-10-10
Angularjs使用directive自定義指令實現(xiàn)attribute繼承的方法詳解
這篇文章主要介紹了Angularjs使用directive自定義指令實現(xiàn)attribute繼承的方法,結(jié)合實例形式較為詳細的分析了基于directive自定義指令實現(xiàn)attribute繼承的具體步驟與相關(guān)技巧,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了深入理解AngularJs－scope的臟檢查（一） ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
淺析angularJS中的ui-router和ng-grid模塊
下面小編就為大家?guī)硪黄獪\析angularJS中的ui-router和ng-grid模塊。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
本篇文章主要介紹了深入探究angular2 UI組件之primeNG用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
AngularJs學(xué)習(xí)第八篇 過濾器filter創(chuàng)建
這篇文章主要介紹了AngularJs學(xué)習(xí)第八篇 過濾器filter創(chuàng)建的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06