Как безопасно связать HTML из модели для просмотра - PullRequest
Новая
       37

Как безопасно связать HTML из модели для просмотра

0 голосов
/ 04 мая 2018

Показать HTML-код в виде HTML-кода, если весь текст и стили сохранены в API

Допустим, я использую текстовый редактор, и я сохраняю на 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.

Спасибо заранее.

1 Ответ

0 голосов
/ 05 мая 2018

Используйте директиву ng-bind-html с модулем ngSanitize : 

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>

Для получения дополнительной информации, Справочник по API AngularJS ng-bind-html .

...