如何安全地将 HTML 从模型绑定到视图

Question

如果所有文本和样式都保存在 api

上，则将 html 代码显示为 html 代码

假设我使用的是文本编辑器，我不仅保存了文本 api，还保存了 html 样式（例如 <align>、<h1>, blabla).我想要的是在我的 html 视图中显示文本，但使用样式。例如，如果我保存了 <h1><u>Hello there!</u><h1>，我需要在我的 html 视图中显示标题为 h1 并带有下划线的文本。

我获取 api 响应的代码：

function info(){
        $http.get('/theApi')
        .then(function(data){
            $scope.product = data.data.Response;
        });
    }

Returns 像这样：

[{Name: "Chuck", Message: "<h1><u>Hello there!</u><h1>"}]

如果我这样传递数据：

{{product.Message}}

在我的 html 视图中，我会得到字面意思：

<h1><u>Hello there!</u><h1>

那么，我该怎么做才能将文本作为标题 h1 并在 html 视图中添加下划线？

我正在使用 AnguarJs 和 Javascript。

提前致谢

Answer 1

使用 ng-bind-html 指令和 ngSanitize module:

angular.module('bindHtmlExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope) {
    $scope.myHTML =
       '<h1><u>Hello there!</u><h1>';
 }]);

<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-sanitize/angular-sanitize.js"></script>

<body ng-app="bindHtmlExample" ng-controller="ExampleController">
  <input ng-model="myHTML">
  <p ng-bind-html="myHTML"></p>
</body>

更多信息，AngularJS ng-bind-html Directive API Reference。

如何安全地将 HTML 从模型绑定到视图

How to safely bind HTML from Model to View

javascript

angularjs

ngsanitize

如果所有文本和样式都保存在 api