angular將html代碼輸出為內容的實例
更新時間：2018年09月30日 11:22:10 作者：A_one2010
今天小編就為大家分享一篇angular將html代碼輸出為內容的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在前端與后臺的拉扯中，很大一部分是因為數據的問題。使用angular會遇到這樣的問題，后臺返回的數據不是自己想要的純字符串，而是帶有html標簽及屬性的，那么我們將它輸出來后，在頁面上就出現(xiàn)了帶有標簽的內容，很不優(yōu)雅。那么找后臺更改的話，又會引起議論拉扯大戰(zhàn)，而且人家不一定有時間搭理你。這樣的情況下，我們就要自己動手，豐衣足食了。
通常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中使用Intersection Observer API實現(xiàn)無限滾動效果
這篇文章主要介紹了Angular中使用Intersection Observer API實現(xiàn)無限滾動,實現(xiàn)原理為 在data下面加一個loading元素 如果此元素進入視窗 則調用api獲取新的數據加到原來的數據里面,這時loading就會被新數據頂下去,感興趣的朋友一起看看吧2023-12-12
本篇文章主要介紹了Angualr 組件間通信，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
Angular.JS判斷復選框checkbox是否選中并實時顯示
最近因為工作需要做了一個選擇標簽的功能，把一些標簽展示給用戶，用戶選擇自己喜歡的標簽，就類似我們在購物網站看到的那種過濾標簽似的，所以這篇文章就給大家介紹了Angular.JS判斷復選框checkbox是否選中并實時顯示的方法，下面來一起看看吧。2016-11-11
這篇文章主要和大家一起學習Angularjs分頁指令，代碼很詳細，文章結構緊湊，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要為大家詳細介紹了Angular模板表單校驗方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
本文主要介紹AngularJS 輸入驗證,這里對AngularJS 輸入驗證的資料做了整理,并附簡單實例代碼和效果圖,有需要的小伙伴參考下2016-07-07
這篇文章主要介紹了AngularJS 單元測試（二）的相關資料,需要的朋友可以參考下2016-09-09
angular是Google開發(fā)的一個單頁面應用框架,是現(xiàn)在比較主流的單頁面應用框架之一，下面通過本文給大家介紹AngularJs中route的使用方法和配置，感興趣的朋友一起學習吧2016-02-02
這篇文章主要給大家介紹了關于如何以Angular的姿勢打開Font-Awesome的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Angular具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-04-04
ng-bind-html和ng-bind的區(qū)別就是,ng-bind把值作為字符串,和元素的內容進行綁定,但是ng-bind-html把值作為html,和元素的html進行綁定.相當于jq里面的.text()和.html()。這篇文章主要給大家深入的介紹了AngularJS中ng-bind-html指令 的相關資料,需要的朋友可以參考下。2017-03-03