javascript - 将 JSON HTML 字符串转换为 HTML

Question

我已经使用 Moodle WebService 开发了一个 AngularJS Moodle webapp，我正在尝试展示来自 Moodle eLearning 的测验。

我可以使用 $http. 得到每一个问题.现在的问题是，当我得到问题时，每个问题都带有这样的 HTML 代码:

我正在使用此控件获取响应 (url5)

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

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

$http.get(url4).then(function (response) {
                    //console.log(response.data); 
                })

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

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

当我使用以下代码在 HTML 中显示问题时，我将 HTML 代码作为字符串获取并尝试使用 ng-bind-html但是我得到了一个错误。

<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}}">
            <div>
                <!--{{question.html}}<br /><br />-->
                <p ng-bind-html="question.html"> </p><br /><br /> 
            </div>
          </div> 
    </div>
</div>

另外，我试过:

JSON.stringify
angular.fromJson(json);

当我使用这行时 {{question.html}}<br /><br /> ，我得到这个:

谢谢大家的帮助!

Answer 1

我认为您需要严格上下文转义服务 ($sce)。这是一项服务，使您能够指定它可以的上下文。允许任意 HTML。

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

将它注入(inject)你的 Controller :

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

在你看来:

{{questions}}