Question

我遇到过这篇文章，这或多或少地涉及到我想要做的事情：example

截至目前，代码如下所示，正确呈现为文本：

<div ng-repeat="item in items.Items">
        {{item}}<br>
</div>

我希望现在将其呈现为HTML，因此从该帖子开始，我看起来像这样：

<div ng-repeat="item in items.Items" ng-bind-html-unsafe="item">
    <br>
</div>

然而，结果没有任何结果。有谁知道那是为什么？我也尝试将ng-bind-html-unsafe设置为“{{item}}”，这没效果

Answer 1

你应该使用ng-bind-html，你可以这样做：

 $scope.myHTML = $sce.trustAsHtml('<b>some</b> html');

请参阅已更新 fiddle。

在你的情况下使用一些函数或首先在控制器中传递数组：

$scope.getHtml = function(v){
   return $sce.trustAsHtml(v);
};

Answer 2

最好将html标记为.js文件绑定到.html的字符串格式为 safe 。

一种方法是，可以通过使用 AngularJS 对$sce的依赖注入来实现。人们可以阅读更多关于它的信息，详见here。

我使用 list 创建了一个演示，因为你只共享了HTML而不是JS，所以我假设了一个并通过信任HTML字符串来说明如何使用它$sce.trustAsHtml()。

参考demo。

请查看以下代码：

<强> HTML：

<div ng-app="app" ng-controller="test">
  <div ng-repeat="item in items" ng-bind-html="item">
  </div>
</div>

<强> JS：

var app = angular.module('app', []);

app.controller('test', function($scope, $sce) {
  $scope.data = [{
    "Items": [{
      "data": "<p>Item 1</p>"
    }, {
      "data": "<p>Item 2</p>"
    }, {
      "data": "<p>Item 3</p>"
    }, {
      "data": "<p>Item 4</p>"
    }]
  }];
  $scope.items = [];
  angular.forEach($scope.data[0].Items, function(v, k) {
    $scope.items.push($sce.trustAsHtml(v.data));
  });
});

无法在AngularJS中使用ng-repeat来呈现HTML值

2 个答案: