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