html - 显示从 MySQL 数据库中检索到的 HTML

Question

所以我从 MySQL 数据库返回一个字符串，如下所示 <i>a</i><sup>2</sup> + <i>b</i><sup>2</sup> = <i>c</i><sup>2</sup>

不幸的是，该字符串在浏览器中显示为<i>a</i><sup>2</sup> + <i>b</i><sup>2</sup> = <i>c</i><sup>2</sup>。 .

PHP文件如下:

<?php
    require_once './config.php';

    $query = $db->prepare("SELECT * FROM `events`");
    $query->execute();

    $results = $query->fetchAll(PDO::FETCH_ASSOC);

    echo $json_response = json_encode($results);

?>

这是在 JS Controller 中使用资源解析的:

$scope.events = data;

$resource($scope.events).get().$promise.then(function (events) {
                        vm.events = events;
                    });

它的工作原理是通过 ngRepeat 显示内容，如下所示:

<div class="container" id="visualization" ng-repeat="event in events">

            <div class="row">
                <div ng-class-odd="'col-md-6 col-md-offset-6'" ng-class-even="'col-md-6'">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            {{event.day}} {{event.month}} {{event.year}}
                        </div>

                        <div class="panel-body">
                            {{event.description}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

非常感谢任何帮助!谢谢!

编辑 1:

鉴于以下解决方案，我唯一更改的是我的 Controller 文件和 View 文件本身，即:

Controller 文件

var angular_module_name = angular.module('angular_module_name', []);

angular_module_name.filter('to_trusted', ['$sce', function ($sce) {
    return function (text) {
        return $sce.trustAsHtml(text);
    };
}]);

查看文件

    <div class="container" id="visualization" ng-repeat="event in events">

        <div class="row">
            <div ng-class-odd="'col-md-6 col-md-offset-6'" ng-class-even="'col-md-6'">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        {{event.day}} {{event.month}} {{event.year}}
                    </div>

                    <div class="panel-body">
                        <span class="description" ng-bind-html="event.description | to_trusted"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

添加过滤器:

.filter('to_trusted', ['$sce', function ($sce) {
    return function (text) {
        return $sce.trustAsHtml(text);
};

在 html 中，

<div class="description" ng-bind-html="description | to_trusted"></div>