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 相关文章推荐
asp 的 分词实现代码
May 24 Javascript
jQuery 连续列表实现代码
Dec 21 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
详解用node编写自己的cli工具
May 23 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
vue自动化表单实例分析
May 06 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 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中文分词系统SCWS安装和使用实例
2014/04/11 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
Python的in,is和id函数代码实例
2020/04/18 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
Shell如何接收变量输入
2016/08/06 面试题
金融专业个人求职信范文
2013/11/28 职场文书
家长寄语大全
2014/04/02 职场文书
滞留工资返还协议书
2014/10/19 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
2014年法院工作总结
2014/11/24 职场文书
初二学生评语大全
2014/12/26 职场文书
长城的导游词
2015/01/30 职场文书
自书遗嘱范文
2015/08/07 职场文书
体育教师教学随笔
2015/08/15 职场文书
外出听课学习心得体会
2016/01/15 职场文书
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript