深入理解AngularJS中的ng-bind-html指令和$sce服務(wù)
前言
Angularjs的強(qiáng)大之處之一就是他的數(shù)據(jù)雙向綁定這一牛B功能，我們會(huì)常常用到的兩個(gè)東西就是ng-bind和針對(duì)form的ng-model。
但在我們的項(xiàng)目當(dāng)中會(huì)遇到這樣的情況，后臺(tái)返回的數(shù)據(jù)中帶有各種各樣的html標(biāo)簽。
如：
$scope.currentWork.description = “hello,<br><b>今天我們?nèi)ツ睦铮?lt;/b>”
我們用ng-bind-html這樣的指令來綁定，結(jié)果卻不是我們想要的。
是這樣的
hello, 今天我們?nèi)ツ睦铮?/pre>
怎么辦呢？
對(duì)于angular 1.2一下的版本我們必須要使用$sce這個(gè)服務(wù)來解決我們的問題。所謂sce即“Strict Contextual Escaping”的縮寫。翻譯成中文就是“嚴(yán)格的上下文模式”也可以理解為安全綁定吧。
來看看怎么用吧。
controller code:
$http.get('/api/work/get?workId=' + $routeParams.workId).success(function (work) {$scope.currentWork = work;});
HTML code:
<p> {{currentWork.description}}</p>
我們返回的內(nèi)容中包含一系列的html標(biāo)記。表現(xiàn)出來的結(jié)果就如我們文章開頭所說的那樣。這時(shí)候我們必須告訴它安全綁定。它可以通過使用$ sce.trustAsHtml() 。該方法將值轉(zhuǎn)換為特權(quán)所接受并能安全地使用“ng-bind-html”。所以，我們必須在我們的控制器中引入$sce服務(wù)
controller('transferWorkStep2', ['$scope','$http','$routeParams','$sce', function ($scope,$http, $routeParams, $sce) {
$http.get('/api/work/get?workId=' + $routeParams.workId)
.success(function (work) {
$scope.currentWork = work;
$scope.currentWork.description = $sce.trustAsHtml($rootScope.currentWork.description);
});
html code:
<p ng-bind-html="currentWork.description"></p>
這樣結(jié)果就完美的呈現(xiàn)在頁面上了：
hello 今天我們?nèi)ツ睦铮?/pre>
咱們還可以這樣用，把它封裝成一個(gè)過濾器就可以在模板上隨時(shí)調(diào)用了
app.filter('to_trusted', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
}]);
html code:
<p ng-bind-html="currentWork.description | to_trusted"></p>
總結(jié)
以上就是關(guān)于AngularJS中的ng-bind-html指令和$sce服務(wù)的全部內(nèi)容了，希望對(duì)大家的學(xué)習(xí)或者工作帶來一定的幫助，如果有問題可以留言交流。
相關(guān)文章
AngularJS 讓人愛不釋手的八種功能，想知道AngularJS哪八種功能讓人喜歡就快點(diǎn)看下本文吧2016-03-03
這篇文章主要介紹了AngularJS指令中的綁定策略,結(jié)合實(shí)例形式分析了scope綁定策略的分類與具體實(shí)現(xiàn)方法,需要的朋友可以參考下2016-12-12
AngularJs Managing Service Dependencies詳解
本站主要介紹AngularJs Managing Service Dependencies的知識(shí)資料，這里整理相關(guān)知識(shí)，及簡單示例代碼，有興趣的小伙伴可以參考下2016-09-09
本文主要介紹AngularJS 引導(dǎo)程序,這里整理了相關(guān)資料及示例代碼，詳細(xì)講解了引導(dǎo)程序的知識(shí)要點(diǎn)，有興趣的小伙伴可以參考下2016-08-08
本篇文章主要介紹了Angular2 組件通信的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
AngularJS雙向數(shù)據(jù)綁定原理之$watch、$apply和$digest的應(yīng)用
這篇文章主要介紹了AngularJS雙向數(shù)據(jù)綁定原理之$watch、$apply和$digest的應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
今天小編就為大家分享一篇AngularJS發(fā)送異步Get/Post請求方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了AngularJS Controller的作用域，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
Angular 4中如何顯示內(nèi)容的CSS樣式示例代碼
這篇文章主要給大家介紹了關(guān)于Angular 4中如何顯示內(nèi)容的CSS樣式的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
Angular.js實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)60秒按鈕的簡單方法
最近做項(xiàng)目的時(shí)候又遇到了驗(yàn)證碼倒計(jì)時(shí)的需求，發(fā)現(xiàn)這個(gè)功能還是挺實(shí)用的，所以就想著總結(jié)一下，下面這篇文章主要給大家介紹了關(guān)于利用Angular.js如何實(shí)現(xiàn)獲取驗(yàn)證碼倒計(jì)時(shí)按鈕的簡單方法，需要的朋友可以參考借鑒，下面來一起看看吧。2017-10-10