AngularJS中取消对HTML片段转义的方法例子


Posted in Javascript onJanuary 04, 2015

今天尝试用 Rails 做后端提供 JSON 格式的数据, AngularJS 做前端处理 JSON 数据,其中碰到 AngularJS 获取的是一段 HTML 文本,如果直接使用 data-ng-bind 的话是被转义过的,使用 data-ng-bind-html 则可以取消转义。

但是直接使用 data-ng-bind-html 的话会提示错误

Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

HTML 片段需要先使用 $sce.trustAsHtml(html_in_string) 将标记为信任,然后才可以使用 data-ng-bind-html="html_in_string" 取消转义。

在我这里 Angular 通过 API 或取的所有文章中,每篇文章有个 html_body 属性是经过 Markdown 或者 Org 渲染过的 HTML 片段。

在通过 API 获取 JSON 数据后,使用 AngularJS 提供的 angular.forEach 方法对每个 post 的 html_body 进行标记,并将结果保存为 trustedBody, 然后在 HTML 中使用 data-ng-bind-html="post.trustedBody" 即可以取消转义。

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>
Javascript 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
js实现随机抽奖
Mar 19 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 Javascript
jQuery中:enabled选择器用法实例
Jan 04 #Javascript
jQuery中:file选择器用法实例
Jan 04 #Javascript
jQuery中:button选择器用法实例
Jan 04 #Javascript
原生javascript实现隔行换色
Jan 04 #Javascript
jQuery中:reset选择器用法实例
Jan 04 #Javascript
浅谈 javascript 事件处理
Jan 04 #Javascript
jquery实现可拖拽弹出层特效
Jan 04 #Javascript
You might like
php zip文件解压类代码
2009/12/02 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
php生成excel列序号代码实例
2013/12/24 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
TP3.2框架分页相关实现方法分析
2020/06/03 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
Python中基本的日期时间处理的学习教程
2015/10/16 Python
详解Python自建logging模块
2018/01/29 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
python小白切忌乱用表达式
2020/05/29 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
教育局长自荐信范文
2013/12/22 职场文书
名人演讲稿范文
2013/12/28 职场文书
创新比赛获奖感言
2014/02/13 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
个人借款协议书范本
2014/11/17 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python