在 AngularJS 中使用 ng-repeat 渲染 HTML 值时遇到问题答案

【问题标题】：Trouble using ng-repeat in AngularJS to render HTML values在 AngularJS 中使用 ng-repeat 渲染 HTML 值时遇到问题
【发布时间】：2016-06-29 21:34:02
【问题描述】：

我看到了这篇文章，它或多或少地包含了我想要做的事情：AngularJS - Is it possible to use ng-repeat to render HTML values?

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

<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}}”，但没有效果

【问题讨论】：

使用 ng-bind-html ...也出于好奇，你用“br”完成了什么？ ng-repeat 建议您重复“div”，默认情况下 div 是显示块，它会以与使用断线相同的方式堆叠元素
你是否引入了 $sanitize 模块？ stackoverflow.com/questions/19415394/…
你能提供一个小提琴吗？项目由什么组成？
stackoverflow.com/questions/19415394/…

标签： javascript html angularjs

【解决方案1】：

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

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

查看更新fiddle。

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

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

【讨论】：

【解决方案2】：

将html 标记为从.js 文件绑定到字符串格式的.html 始终是一个好习惯，作为安全。

一种方法是通过使用 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));
  });
});

【讨论】：