декодирование html-тэга из ответа и отображение его в поле зрения - PullRequest
Новая
       35

декодирование html-тэга из ответа и отображение его в поле зрения

0 голосов
/ 11 июня 2018

Мой приведенный ниже ответ приходит в кодированном формате, я декодирую его, используя фильтр и отображая значение в моем HTML.Но мне нужно отобразить их как HTML на мой взгляд.Таким образом, trustAsHtml был использован.но проблема здесь в том, что когда я использую trustAsHtml, мое декодирование не происходит. Это показывает исключительный токен исключения. 

 $scope.res=  "data": [
                {
                  "jd": "<p>this jd1</p>"
                },
                {
                  "jd": "<li>this jd2</li>"
                },
                {
                  "jd": "<ul>this jd3</ul>"
                },
                {
                  "jd": "<p>this jd4</p>"
                }
              ]
            }

JS: 

$scope.trustAsHtml = $sce.trustAsHtml;

Фильтр: 

 app.filter('decodeFilter', function() {
    return function(input) {
        return decodeURIComponent(unescape(input));
    };
});

HTML: 

     <div ng-repeat="item in res">
        <div ng-bind-html ="trustAsHtml(item.jd | decodeFilter)">
</div>

Ответы [ 2 ]

0 голосов
/ 11 июня 2018

Кажется, есть проблема с вашим объектом ng-repeat res, вы должны использовать res.data в соответствии с вашим кодом.Я также внес некоторые исправления в ваш пользовательский фильтр.Также вы можете проверить этот поршень для вашего данного рабочего примера.

Шаблон: 

<div ng-repeat="item in res.data">
  <div ng-bind-html ="item.jd | decodeFilter"></div>
</div>

Контроллер: 

app.controller('MainCtrl', function($scope) {
  $scope.res = {
    "data": [ {
        "jd": "<p>this jd1</p>"
      }, {
        "jd": "<li>this jd2</li>"
      }, {
        "jd": "<ul>this jd3</ul>"
      }, {
        "jd": "<p>this jd4</p>"
      }]
  };
});
app.filter('decodeFilter', function($sce) {
    return function(input) {
        return $sce.trustAsHtml(decodeURIComponent(input));
    };
});

Примечание: Функция unescape () устарела в JavaScript версии 1.5.Вместо этого используйте decodeURI () или decodeURIComponent ().Это означает, что unescape равен decodeURLComponent.

0 голосов
/ 11 июня 2018

Вы пытались включить его в app.config с помощью $ sceProvider , как это? 

angular
.module('myapp')
.config(["$locationProvider", "$sceProvider",function config($locationProvider, $sceProvider) {
        $sceProvider.enabled(true);
        $locationProvider.html5Mode(true);
});
...