代码之家 › 专栏 › 技术社区 › Nicoleta Wilskon

从响应解码HTML标记并在视图中显示它

decodeuricomponent ng-bind-html angularjs

0

Nicoleta Wilskon · 技术社区 · 6 年前

我下面给出的响应是编码格式的,我正在使用过滤器对其进行解码,并在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 回复 | 直到 6 年前

1

Immanuel Kirubaharan 6 年前

您的ng repeat对象res似乎有问题,您应该根据代码使用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));
    };
});

注: 在javascript版本1.5中,unescape()函数已被弃用。请改用decodeUri()或decodeUriComponent()。这意味着unescape等于decodeurlcomponent。

2

0

Xxx Xxx 6 年前

是否尝试在app.config中使用 $sceprovider提供程序 这样地?

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