今天尝试用 Rails 做后端提供 JSON 格式的数据

金沙网址,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
属性是通过 马克down 只怕 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>

明日尝试用 Rails 做后端提供 JSON 格式的数据, AngularJS 做前端处理 JSON
数据,在那之中蒙受 AngularJS…

相关文章