AngularJS中取消對(duì)HTML片段轉(zhuǎn)義的方法例子
今天嘗試用 Rails 做后端提供 JSON 格式的數(shù)據(jù)， AngularJS 做前端處理 JSON 數(shù)據(jù)，其中碰到 AngularJS 獲取的是一段 HTML 文本，如果直接使用 data-ng-bind 的話是被轉(zhuǎn)義過的，使用 data-ng-bind-html 則可以取消轉(zhuǎn)義。
但是直接使用 data-ng-bind-html 的話會(huì)提示錯(cuò)誤
Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.
HTML 片段需要先使用 $sce.trustAsHtml(html_in_string) 將標(biāo)記為信任，然后才可以使用 data-ng-bind-html="html_in_string" 取消轉(zhuǎn)義。
在我這里 Angular 通過 API 或取的所有文章中，每篇文章有個(gè) html_body 屬性是經(jīng)過 Markdown 或者 Org 渲染過的 HTML 片段。
在通過 API 獲取 JSON 數(shù)據(jù)后，使用 AngularJS 提供的 angular.forEach 方法對(duì)每個(gè) post 的 html_body 進(jìn)行標(biāo)記，并將結(jié)果保存為 trustedBody, 然后在 HTML 中使用 data-ng-bind-html="post.trustedBody" 即可以取消轉(zhuǎn)義。
AngularJS 部分
Blog.controller('PostsController', function ($scope, $http, $sce) {
$scope.posts = [];
$scope.syncPosts = function () {
var request = $http.get('http:/localhost:3000/posts.json');
request.success(function (response) {
$scope.posts = angular.forEach(angular.fromJson(response), function (post) {
post.trustedBody = $sce.trustAsHtml(post.html_body);
});
});
};
$scope.syncPosts();
});
HTML 部分
<div class="post-body markup-body" data-ng-bind-html="post.trustedBody"></div>
相關(guān)文章
詳解AngularJs HTTP響應(yīng)攔截器實(shí)現(xiàn)登陸、權(quán)限校驗(yàn)
本篇文章主要介紹了AngularJs HTTP響應(yīng)攔截器實(shí)現(xiàn)登陸、權(quán)限校驗(yàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-04-04
從?Angular?Route?中提前獲取數(shù)據(jù)的方法詳解
這篇文章主要介紹了從?Angular?Route?中提前獲取數(shù)據(jù),通過本文，你將學(xué)會(huì)使用?resolver，?在?Angular?App?中應(yīng)用?resolver，應(yīng)用到一個(gè)公共的預(yù)加載導(dǎo)航，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-07-07
Angular本身監(jiān)督所有Angular組件和指令的生命周期 。為了在開發(fā)應(yīng)用程序時(shí)順利進(jìn)行，您必須了解結(jié)果的生命周期。組件是任何Angular應(yīng)用程序的主要構(gòu)建塊。因此，必須了解它們才能理解組件生命周期的處理步驟。只有這樣才能在應(yīng)用程序的開發(fā)中實(shí)現(xiàn)。2021-05-05
Angular.js中$resource高大上的數(shù)據(jù)交互詳解
這篇文章主要給大家介紹了關(guān)于Angular.js中$resource高大上的數(shù)據(jù)交互的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用angular.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起看看吧。2017-07-07
淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機(jī)制)
本篇文章主要介紹了淺談AngularJs 雙向綁定原理(數(shù)據(jù)綁定機(jī)制)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
Angluar+zorro實(shí)現(xiàn)無限級(jí)菜單
這篇文章主要為大家詳細(xì)介紹了Angluar+zorro實(shí)現(xiàn)無限級(jí)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了詳解Ubuntu安裝angular-cli遇到的坑，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
Angular實(shí)現(xiàn)點(diǎn)擊按鈕后在上方顯示輸入內(nèi)容的方法
這篇文章主要介紹了Angular實(shí)現(xiàn)點(diǎn)擊按鈕后在上方顯示輸入內(nèi)容的方法,涉及AngularJS事件響應(yīng)及頁面元素屬性動(dòng)態(tài)設(shè)置相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
給angular加上動(dòng)畫效遇到的問題總結(jié)
本文給大家總結(jié)了一下在angular中給ng-repeat列表加上動(dòng)畫效果時(shí)所遇到的問題及解決方法，推薦給大家，希望大家能夠喜歡。2016-02-02
Angular ElementRef簡(jiǎn)介及其使用
這篇文章主要介紹了Angular ElementRef簡(jiǎn)介及其使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10