angular中怎么將html代碼輸出為內(nèi)容

發(fā)布時(shí)間：2021-06-16 16:15:40 來(lái)源：億速云閱讀：159 作者：Leah 欄目：web開(kāi)發(fā)

angular中怎么將html代碼輸出為內(nèi)容，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

方法一

要輸出為不帶html的內(nèi)容，需要兩步

1 使用$sce.trustAsHtml();方法將數(shù)據(jù)轉(zhuǎn)為unwrapTrustedValue 數(shù)據(jù)。

$scope.aaa = $sce.trustAsHtml("<h4>html代碼</h4>");

2 ng-bind-html 輸出

<div ng-bind-html='aaa'></div>

方法二 filter過(guò)濾器

基于$sce.trustAsHtml()的方法，構(gòu)造過(guò)濾器來(lái)進(jìn)行過(guò)濾。

angular.module('app',[]).filter("showAsHtml",function($sce){
 return funciton(input){
  retrun $sce.trustAsHtml(input);
 }
});

使用的時(shí)候直接在數(shù)據(jù)后加過(guò)濾器即可

<div ng-bind-html='bbb|showAsHtml'></div>

使用了$scr.trustAsHtml() 則展示的時(shí)候，必須使用ng-bind-htm=‘'的形式，而不能使用{{}}

看完上述內(nèi)容，你們掌握angular中怎么將html代碼輸出為內(nèi)容的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡