AngularJS通過$sce輸出html的方法
更新時(shí)間：2016年09月22日 08:58:29 作者：yangnianbing110
不知道大家有沒有發(fā)現(xiàn)在用AngularJS作為前端搭建個(gè)人博客的時(shí)候，發(fā)現(xiàn)用AngularJs輸出html的時(shí)候，瀏覽器并不解析這些html標(biāo)簽，這里我們需要其顯示angular輸出的html能被瀏覽器解析怎么辦呢？不知道Angularjs如何實(shí)現(xiàn)這種功能的通過這篇文章來看看吧。
【問題描述】
AngularJS的強(qiáng)大之處之一就是他的數(shù)據(jù)雙向綁定功能----->ng-bind和針對form的ng-model
但在我們的項(xiàng)目當(dāng)中會(huì)遇到這樣的情況，后臺(tái)返回的數(shù)據(jù)中帶有各種各樣的html標(biāo)簽
AngularJS輸出html的時(shí)候，瀏覽器并不解析這些html標(biāo)簽
通過api，發(fā)現(xiàn)通過指令 ng-bind-html來實(shí)現(xiàn)html的輸出。
<div class="col-md-12 ng-binding" ng-bind-html="item.content ">
但是并不起作用，瀏覽器中顯示的還是html代碼。
【解決辦法】
后來發(fā)現(xiàn)還需要通過通過$sce服務(wù)來實(shí)現(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)建一個(gè)過濾器來對輸出的html進(jìn)行過濾
<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)文章
本文主要介紹AngularJs expression,這里整理了詳細(xì)的資料，并附示例代碼，有興趣的小伙伴可以參考下2016-09-09
AngularJS實(shí)現(xiàn)路由實(shí)例
本文給大家分享的是使用angularjs路由框架實(shí)現(xiàn)的一個(gè)簡單頁面跳轉(zhuǎn)功能，非常的實(shí)用，也很詳細(xì)，有需要的小伙伴可以參考下2017-02-02
angular學(xué)習(xí)之動(dòng)態(tài)創(chuàng)建表單的方法
這篇文章主要介紹了angular學(xué)習(xí)之動(dòng)態(tài)創(chuàng)建表單的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
angular js的雙向數(shù)據(jù)綁定，在開發(fā)中起到的作用灰常大，所以下面這篇文章主要給大家介紹了關(guān)于Angularjs中$apply及優(yōu)化使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧2018-07-07
本篇文章主要介紹了Angular2數(shù)據(jù)綁定的相關(guān)知識。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
如何利用AngularJS打造一款簡單Web應(yīng)用
如果大家希望在應(yīng)用程序的創(chuàng)建工作中采取各類最佳實(shí)踐，那么AngularJS也能夠帶來極大的助益?？偠灾@套框架的強(qiáng)大功能與特性永遠(yuǎn)不會(huì)讓有著應(yīng)用開發(fā)需求的朋友們失望2015-12-12
AngularJS API之copy深拷貝詳解及實(shí)例
這篇文章主要介紹了AngularJS API之copy深拷貝詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了angular 內(nèi)存溢出的問題解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了AngularJS的表單使用詳解,在JS原有的基礎(chǔ)上提供了更多與HTML交互的功能,需要的朋友可以參考下2015-06-06
深入理解AngularJS中的ng-bind-html指令和$sce服務(wù)
這篇文章給大家詳細(xì)介紹了AngularJS中的ng-bind-html指令和$sce服務(wù)，對大家學(xué)習(xí)AngularJS具有一定參考借鑒價(jià)值，有需要都可以參考學(xué)習(xí)。2016-09-09