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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
extjs fckeditor集成代码
May 10 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
JS异步错误捕获的一些事小结
Apr 26 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将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
改进Django中的表单的简单方法
2015/07/17 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
django序列化serializers过程解析
2019/12/14 Python
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
幼儿教育感言
2014/02/05 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
合同协议书格式
2014/04/18 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
2015年三万活动总结
2015/03/25 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS