在前端與后臺的撕逼中，很大一部分是因為數據的問題。使用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代碼輸出為內容的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。