从响应中解码 html 标签并将其显示在视图中

Question

我下面给出的响应是编码格式，我正在使用过滤器解码它并在我的 html 中显示值。但我需要在我看来将它们显示为 html 。所以使用了trustAsHtml。但这里的问题是当我使用 trustAsHtml 时，我的解码没有 occur.it 显示异常意外标记。

 $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>

Answer 1

您是否试过像这样在 app.config 中使用 $sceProvider 启用它？

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

Answer 2

您的 ng-repeat 对象资源似乎有问题，您应该根据您的代码使用 res.data。我也对您的自定义过滤器进行了一些更正。您还可以检查 this plunker 以获取给定的工作示例。

模板：

<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.

从响应中解码 html 标签并将其显示在视图中

decoding the html tag from response and showing it in view

decodeuricomponent

angularjs

ng-bind-html