当前位置: 首页 > 编程笔记 >

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

咸育
2023-03-14
本文向大家介绍AngularJS中取消对HTML片段转义的方法例子,包括了AngularJS中取消对HTML片段转义的方法例子的使用技巧和注意事项,需要的朋友参考一下

今天尝试用 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>

 类似资料:
  • 问题内容: 我要如何转义html? 我正在将css文件传递给html这样 我明白了 我试图用template.HTML(data)包装字段,但是没有用。 问题答案: Go HTML模板包正确地覆盖了CSS。从包装文件中引用: 转义是上下文的,因此操作可以出现在JavaScript,CSS和URI上下文中。 是一个特殊值,如果您要包含的值在上下文中无效或不安全,它将用作替换值。 所以问题是您要包括的

  • 问题内容: 基本上,我想解码给定的HTML文档,并替换所有特殊字符,例如。 在.NET中,我们可以使用。 Java中的等效功能是什么? 问题答案: 我已为此使用: 将包含实体转义符的字符串取消转义为包含与转义符相对应的实际Unicode字符的字符串。支持HTML 4.0实体。

  • 我正在开发一个包含一个活动和多个片段的android应用程序。我的应用程序包含导航抽屉。它的布局包含listview。单击它的项目,我用ft.replace(R.id.my\u placehodler,new MyFragment())动态更改片段,并将事务添加到。当我每次实例化新片段时都进行新事务。在我看来,这不是一个好办法。你能给我一些关于进行片段事务的正确方法的建议吗?

  • 问题内容: 有没有逃脱推荐的方式,和字符时输出中普通的代码?(也就是说,除了手动执行以下操作之外)。 问题答案: 来自的: 对于版本3:

  • 问题内容: 我阅读了很多有关片段的文章,但是我仍然对如何做感到困惑。 我有一个MainActivity,它并排显示两个片段。在一个片段中,我有一个按钮,并在该片段的片段布局XML中定义 现在我要实现该方法 我以为必须在FragmentA.java中实现,而不是在MainActivity.java中实现。但是,只有在MainActivity.java中实现了该方法后,该方法才有效。这是为什么?对我而

  • 我有一个统一码转义字符串: 我想将此字符串转换为unicode未转义的版本 我该怎么做?