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 相关文章推荐
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
js中生成map对象的方法
Jan 09 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
jquery中toggle函数交替使用问题
Jun 22 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
浅析JS异步加载进度条
May 05 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
JS匿名函数实例分析
Nov 26 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 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之第二天
2006/10/09 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
jQuery图片轮播的具体实现
2013/09/11 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
python求pi的方法
2014/10/08 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
python做反被爬保护的方法
2019/07/01 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
怎样写留学自荐信
2013/11/11 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
销售总经理岗位职责
2014/03/15 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
文明生主要事迹
2014/05/25 职场文书
党员批评与自我批评
2014/10/15 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers