快捷導(dǎo)航

詳解Angular.js數(shù)據(jù)綁定時自動轉(zhuǎn)義html標(biāo)簽及內(nèi)容

更新時間：2017年03月30日 11:52:52 作者：我要成為酷酷的人

本篇文章主要介紹了詳解Angular.js數(shù)據(jù)綁定時自動轉(zhuǎn)義html標(biāo)簽及內(nèi)容，具有一定的參考價值，感興趣的小伙伴們可以參考一下。

angularJS在進(jìn)行數(shù)據(jù)綁定時默認(rèn)是以字符串的形式數(shù)據(jù)，也就是對你數(shù)據(jù)中的html標(biāo)簽不進(jìn)行轉(zhuǎn)義照單全收，這樣提高了安全性，防止html標(biāo)簽的注入攻擊，但有時候需要，特別是從數(shù)據(jù)庫讀取帶格式的文本時，無法正常的顯示在頁面中。

而要對html進(jìn)行轉(zhuǎn)義，則需要在數(shù)據(jù)綁定的html標(biāo)簽中使用ng-bind-html屬性，該屬性依賴與$sanitize，也就是需要引入angular-sanitize.js文件，并在module定義時注入該服務(wù)ngSanitize。比如：

html:

<span ng-controller = "myCtr" ng-bind-html = "htmlStr"></span>

javascript:

function myCtr($scope){

　　$scope.htmlStr = '<p style="color:white;background:#f60;"></p>';

};

這樣可以實現(xiàn)html轉(zhuǎn)義，但是有個問題是style這種標(biāo)簽會被angularJS認(rèn)為是不安全的所以統(tǒng)統(tǒng)自動過濾掉，而為了保留這些就需要開啟非安全模式。

如何讓自動加載的數(shù)據(jù)轉(zhuǎn)義html標(biāo)簽?zāi)?？實際上還有一種綁定方式：

html：

<div ng-repeat = "article in articles">

　　<div class="panel-heading">

　　　　<h4><b>{{article.title}}</b></h4>

　　</div>

　　<div class="panel-body">

　　　　<article id="word-display" ng-bind-html="article.content | trustHtml">

　　　　</article>

　　</div>

</div>

javascript:

success(function(data){

　　$scope.articles = data;

});

myApp.filter('trustHtml',function($sce){

　　return function(input){

　　　　return $sce.trustAsHtml(input);

　　}

});

其中$sce是angularJS自帶的安全處理模塊，$sce.trustAsHtml(input)方法便是將數(shù)據(jù)內(nèi)容以html的形式進(jìn)行解析并返回。將此過濾器添加到ng-bind-html所綁定的數(shù)據(jù)中，便實現(xiàn)了在數(shù)據(jù)加載時對與html標(biāo)簽的自動轉(zhuǎn)義。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: