不知道大家有沒有發現在用AngularJS作為前端搭建個人博客的時候，發現用AngularJs輸出html的時候，瀏覽器並不解析這些html標簽，這里我們需要其顯示angular輸出的html能被瀏覽器解析怎么辦呢？不知道Angularjs如何實現這種功能的通過這篇文章來看看吧。
AngularJS的強大之處之一就是他的數據雙向綁定功能----->ng-bind和針對form的ng-model
但在我們的項目當中會遇到這樣的情況，后台返回的數據中帶有各種各樣的html標簽
AngularJS輸出html的時候，瀏覽器並不解析這些html標簽
通過api，發現通過指令 ng-bind-html來實現html的輸出。
|
1
|
<div class="col-md-12 ng-binding" ng-bind-html="item.content ">
|
但是並不起作用，瀏覽器中顯示的還是html代碼。
【解決辦法】
后來發現還需要通過通過$sce服務來實現html的展示。
|
1
2
3
4
5
6
7
|
angular.module("list",[]).controller("BlogListCtrl", BlogListCtrl).filter(
'to_trusted', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
}
}]
)
|
這里通過$sce構建一個過濾器來對輸出的html進行過濾
|
1
|
<div class="col-md-12 ng-binding" ng-bind-html="item.content|to_trusted ">
|
這樣就可以通過AngularJS正常的輸出html標簽，並且被瀏覽器解析了
【總結】
以上就是這篇文章的全部內容了，希望這篇文章的內容對大家的學習或者工作帶來一定的幫助，如果有疑問大家可以留言交流。
轉自http://www.jb51.net/article/93179.htm