angular將html代碼輸出為內(nèi)容的實(shí)例
在前端與后臺的拉扯中，很大一部分是因?yàn)閿?shù)據(jù)的問題。使用angular會遇到這樣的問題，后臺返回的數(shù)據(jù)不是自己想要的純字符串，而是帶有html標(biāo)簽及屬性的，那么我們將它輸出來后，在頁面上就出現(xiàn)了帶有標(biāo)簽的內(nèi)容，很不優(yōu)雅。那么找后臺更改的話，又會引起議論拉扯大戰(zhàn)，而且人家不一定有時(shí)間搭理你。這樣的情況下，我們就要自己動手，豐衣足食了。
通常angular綁定數(shù)據(jù)有這樣的方法，{{}}或者ng-bind =”,此時(shí)數(shù)據(jù)為帶有html標(biāo)簽的數(shù)據(jù)的話，那么就輸出為帶有標(biāo)簽的數(shù)據(jù)，不友好。
如何更改呢？
方法一
要輸出為不帶html的內(nèi)容，需要兩步
1 使用$sce.trustAsHtml();方法將數(shù)據(jù)轉(zhuǎn)為unwrapTrustedValue 數(shù)據(jù)。
$scope.aaa = $sce.trustAsHtml("<h3>html代碼</h3>");2 ng-bind-html 輸出
<div ng-bind-html='aaa'></div>
方法二 filter過濾器
基于$sce.trustAsHtml()的方法，構(gòu)造過濾器來進(jìn)行過濾。
angular.module('app',[]).filter("showAsHtml",function($sce){
return funciton(input){
retrun $sce.trustAsHtml(input);
}
});使用的時(shí)候直接在數(shù)據(jù)后加過濾器即可
<div ng-bind-html='bbb|showAsHtml'></div>
使用了$scr.trustAsHtml() 則展示的時(shí)候，必須使用ng-bind-htm=‘’的形式，而不能使用{{}}
以上這篇angular將html代碼輸出為內(nèi)容的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Angular中使用Intersection Observer API實(shí)現(xiàn)無限滾動效果
這篇文章主要介紹了Angular中使用Intersection Observer API實(shí)現(xiàn)無限滾動,實(shí)現(xiàn)原理為 在data下面加一個(gè)loading元素 如果此元素進(jìn)入視窗 則調(diào)用api獲取新的數(shù)據(jù)加到原來的數(shù)據(jù)里面,這時(shí)loading就會被新數(shù)據(jù)頂下去,感興趣的朋友一起看看吧2023-12-12
本篇文章主要介紹了Angualr 組件間通信，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
Angular.JS判斷復(fù)選框checkbox是否選中并實(shí)時(shí)顯示
最近因?yàn)楣ぷ餍枰隽艘粋€(gè)選擇標(biāo)簽的功能，把一些標(biāo)簽展示給用戶，用戶選擇自己喜歡的標(biāo)簽，就類似我們在購物網(wǎng)站看到的那種過濾標(biāo)簽似的，所以這篇文章就給大家介紹了Angular.JS判斷復(fù)選框checkbox是否選中并實(shí)時(shí)顯示的方法，下面來一起看看吧。2016-11-11
這篇文章主要和大家一起學(xué)習(xí)Angularjs分頁指令，代碼很詳細(xì)，文章結(jié)構(gòu)緊湊，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要為大家詳細(xì)介紹了Angular模板表單校驗(yàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
AngularJS 輸入驗(yàn)證詳解及實(shí)例代碼
本文主要介紹AngularJS 輸入驗(yàn)證,這里對AngularJS 輸入驗(yàn)證的資料做了整理,并附簡單實(shí)例代碼和效果圖,有需要的小伙伴參考下2016-07-07
這篇文章主要介紹了AngularJS 單元測試（二）的相關(guān)資料,需要的朋友可以參考下2016-09-09
angular是Google開發(fā)的一個(gè)單頁面應(yīng)用框架,是現(xiàn)在比較主流的單頁面應(yīng)用框架之一，下面通過本文給大家介紹AngularJs中route的使用方法和配置，感興趣的朋友一起學(xué)習(xí)吧2016-02-02
這篇文章主要給大家介紹了關(guān)于如何以Angular的姿勢打開Font-Awesome的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Angular具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04
ng-bind-html和ng-bind的區(qū)別就是,ng-bind把值作為字符串,和元素的內(nèi)容進(jìn)行綁定,但是ng-bind-html把值作為html,和元素的html進(jìn)行綁定.相當(dāng)于jq里面的.text()和.html()。這篇文章主要給大家深入的介紹了AngularJS中ng-bind-html指令 的相關(guān)資料,需要的朋友可以參考下。2017-03-03