angular將html代碼輸出為內(nèi)容的實(shí)例
在前端與后臺的拉扯中，很大一部分是因?yàn)閿?shù)據(jù)的問題。使用angular會(huì)遇到這樣的問題，后臺返回的數(shù)據(jù)不是自己想要的純字符串，而是帶有html標(biāo)簽及屬性的，那么我們將它輸出來后，在頁面上就出現(xiàn)了帶有標(biāo)簽的內(nèi)容，很不優(yōu)雅。那么找后臺更改的話，又會(huì)引起議論拉扯大戰(zhàn)，而且人家不一定有時(shí)間搭理你。這樣的情況下，我們就要自己動(dòng)手，豐衣足食了。
通常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刷新當(dāng)前頁面的實(shí)現(xiàn)方法
這篇文章主要介紹了Angular刷新當(dāng)前頁面的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
Angular將填入表單的數(shù)據(jù)渲染到表格的方法
這篇文章主要介紹了Angular將填入表單的數(shù)據(jù)渲染到表格的方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
Angular5中調(diào)用第三方j(luò)s插件的方法
下面小編就為大家分享一篇Angular5中調(diào)用第三方j(luò)s插件的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
angular6?Error:Debug?Failure?at?typeToString解決分析
這篇文章主要為大家介紹了angular6?Error:Debug?Failure?at?typeToString解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
Angular中封裝fancyBox(圖片預(yù)覽)遇到問題小結(jié)
這篇文章主要介紹了Angular中封裝fancyBox(圖片預(yù)覽)遇到的問題小結(jié),需要的朋友可以參考下2017-09-09
這篇文章主要介紹了AngularJS 的$timeout服務(wù)示例代碼,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了Angularjs 依賴壓縮及自定義過濾器寫法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
詳解如何為你的angular app構(gòu)建一個(gè)第三方庫
這篇文章主要介紹了詳解如何為你的angular app構(gòu)建一個(gè)第三方庫，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
AngularJS 獲取ng-repeat動(dòng)態(tài)生成的ng-model值實(shí)例詳解
這篇文章主要介紹了AngularJS 獲取ng-repeat動(dòng)態(tài)生成的ng-model值實(shí)例詳解的相關(guān)資料,這里提供實(shí)例代碼及實(shí)現(xiàn)效果圖，需要的朋友可以參考下2016-11-11
AngularJS實(shí)踐之使用NgModelController進(jìn)行數(shù)據(jù)綁定
大家都知道AngularJS中的指令是其尤為復(fù)雜的一個(gè)部分，但是這也是其比較好玩的地方。這篇文章我們就來說一說如何在我們自定義的指令中，利用ngModel的controller來做雙向數(shù)據(jù)綁定，本文對大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值，有需要的朋友們可以參考借鑒。2016-10-10