angular將html代碼輸出為內容的實例

發布時間: 2019-06-11 13:30:30 來源: 互聯網 欄目: JavaScript 點擊:

今天小編就為大家分享一篇angular將html代碼輸出為內容的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

在前端與后臺的撕逼中,很大一部分是因為數據的問題。使用angular會遇到這樣的問題,后臺返回的數據不是自己想要的純字符串,而是帶有html標簽及屬性的,那么我們將它輸出來后,在頁面上就出現了帶有標簽的內容,很不優雅。那么找后臺更改的話,又會引起議論撕逼大戰,而且人家不一定有時間搭理你。這樣的情況下,我們就要自己動手,豐衣足食了。

通常angular綁定數據有這樣的方法,{{}}或者ng-bind =”,此時數據為帶有html標簽的數據的話,那么就輸出為帶有標簽的數據,不友好。

如何更改呢?

方法一

要輸出為不帶html的內容,需要兩步

1 使用$sce.trustAsHtml();方法將數據轉為unwrapTrustedValue 數據。

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

2 ng-bind-html 輸出

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

方法二 filter過濾器

基于$sce.trustAsHtml()的方法,構造過濾器來進行過濾。

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

使用的時候直接在數據后加過濾器即可

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

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

以上這篇angular將html代碼輸出為內容的實例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持我們。

本文標題: angular將html代碼輸出為內容的實例
本文地址: http://www.leskzw.tw/wangluo/javascript/240856.html

如果認為本文對您有所幫助請贊助本站

支付寶掃一掃贊助微信掃一掃贊助

  • 支付寶掃一掃贊助
  • 微信掃一掃贊助
  • 支付寶先領紅包再贊助
    聲明:凡注明"本站原創"的所有文字圖片等資料,版權均屬編程客棧所有,歡迎轉載,但務請注明出處。
    對angularJs中$sce服務安全顯示html文本的實例基于VUE實現的九宮格抽獎功能
    Top 广东好彩1中奖规则