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;
        });
    }

返回如下内容：

[{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从Model绑定到View

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

1 个答案: