AngularJS通過$sce輸出html的方法_AngularJS

【問題描述】

AngularJS的強大之處之一就是他的資料雙向繫結功能----->ng-bind和針對form的ng-model

但在我們的項目當中會遇到這樣的情況，後台返回的資料中帶有各種各樣的html標籤

AngularJS輸出html的時候，瀏覽器並不解析這些html標籤

通過api，發現通過指令 ng-bind-html來實現html的輸出。

<div class="col-md-12 ng-binding" ng-bind-html="item.content "> 

但是並不起作用，瀏覽器中顯示的還是html代碼。

【解決辦法】

後來發現還需要通過通過$sce服務來實現html的展示。

angular.module("list",[]).controller("BlogListCtrl", BlogListCtrl).filter(  'to_trusted', ['$sce', function ($sce) {   return function (text) {    return $sce.trustAsHtml(text);   }  }] ) 

這裡通過$sce構建一個過濾器來對輸出的html進行過濾

<div class="col-md-12 ng-binding" ng-bind-html="item.content|to_trusted "> 

這樣就可以通過AngularJS正常的輸出html標籤，並且被瀏覽器解析了

【總結】

以上就是這篇文章的全部內容了，希望這篇文章的內容對大家的學習或者工作帶來一定的協助，如果有疑問大家可以留言交流。