Example of method to unescape HTML fragments in AngularJS

Today, I try to use Rails as the backend to provide JSON format data, and AngularJS is used to process JSON data in the frontend. When AngularJS gets a piece of HTML text. If you use data-ng-bind directly, it is escaped. Using data-ng-bind-html can cancel the escape.

However, if you use data-ng-bind-html directly, you will prompt an error

Copy the codeThe code is as follows:

Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

HTML fragments need to be marked as trust using $(html_in_string) before they can be unescaped using data-ng-bind-html="html_in_string".

Among all the articles I took from Angular via API or through each article, each article has an html_body attribute that is an HTML fragment rendered by Markdown or Org.

After getting JSON data through the API, use the method provided by AngularJS to mark the html_body of each post and save the result as trustedBody, and then use data-ng-bind-html="" in HTML to cancel the escape.

AngularJS part

Copy the codeThe code is as follows:

('PostsController', function ($scope, $http, $sce) {
$ = [];

$ = function () {
    var request = $('http:/localhost:3000/');
    (function (response) {
      $ = ((response), function (post) {
        = $(post.html_body);
      });
    });
};

$();
});

HTML Part

Copy the codeThe code is as follows: