rfcabal rfcabal - 8 months ago 44
JSON Question

Convert JSON HTML string to HTML

I have developed an AngularJS Moodle webapp using Moodle WebService and I'm triying to show a quiz from Moodle eLearning.

I can get every question using

. now the problem is that when I get the question, every question comes with a HTML code like this:

JSON Response

An I'm using this controlores to get the response (url5)

app.controller('quizCtrl', function($rootScope, $scope, $http) {

url4 = concatUrl + 'mod_quiz_start_attempt' + '&quizid=2';

$http.get(url4).then(function (response) {

url5 = concatUrl + 'mod_quiz_get_attempt_data' + '&attemptid=7&page=0';

$http.get(url5).then(function (response) {
$scope.questions = response.data.questions;

When I show the question in my HTML using the following code, I'm getting HTML code as a string and tried to used
but I got an error.

<div role="main" id="main" class="ui-content scroll" ng-app="mainApp">
<div data-role="content" class="pane" id="">
<div class="page-wrap scroll" ng-controller="quizCtrl">
<div ng-repeat="question in questions | orderBy : 'question.number'" id="{{question.number}}">
<!--{{question.html}}<br /><br />-->
<p ng-bind-html="question.html"> </p><br /><br />


Also, I tried with:


When I use this lines
{{question.html}}<br /><br />
, I'm getting this:

With regular line

Thanks for your help guys!

Answer Source

I think you need the Strict Contextual Escaping Service ($sce). This is a service that enables you to specify the contexts in which it is O.K. to allow arbitrary HTML.

Docs: https://docs.angularjs.org/api/ng/service/$sce

Inject it in your controller:

app.controller('quizCtrl', function($rootScope, $scope, $http, $sce) 
$http.get(url5).then(function (response) {
    $sce.trustAsHtml = $sce.trustAsHtml; // <- needs to be exposed on $scope
    $scope.questions = $sce.trustAsHtml(response.data.questions);

And in your view: