在 AngularJS 中使用 ng-repeat 渲染 HTML 值时出现问题

Trouble using ng-repeat in AngularJS to render HTML values

本文关键字：问题 HTML 渲染 AngularJS ng-repeat      更新时间：2023-09-26

我遇到了这篇文章，它或多或少地包含了我想做的事情： AngularJS - 是否可以使用 ng-repeat 来呈现 HTML 值？

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

<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，你可以这样做：

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

请参阅更新的小提琴。

在您的情况下，首先使用一些函数或将数组传入控制器： 

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

html标记为从.js文件绑定到字符串格式的.html始终是一种很好的做法，因为安全。

一种方法

是利用 AngularJS 的依赖注入和 $sce 来实现。人们可以阅读更多关于它的信息，长度在这里。

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

参考演示。

请看下面的代码：

.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));
  });
});
相关文章：