在 Angular 范围数据中使用 HTML 标签答案

【问题标题】：Using HTML tags in Angular Scope Data在 Angular 范围数据中使用 HTML 标签
【发布时间】：2014-04-25 06:34:18
【问题描述】：

在我的 Angular 应用程序中，我有一些需要在其中包含 html 标记的数据，但我在确保它被转义时遇到了一些麻烦。

 $scope.groups = [
    {
      'name': 'min',
      'item': '<h1>This is some awsome H1</h1><ul><li>yup></li></ul>',
    },
     {
      'name': 'min',
      'item': '<h1>This is some awsome H1</h1><ul><li>yup></li></ul>',
    },
     {
      'name': 'min',
      'item': '<h1>This is some awsome H1</h1><ul><li>yup></li></ul>',
    },
     {
      'name': 'min',
      'item': '<h1>This is some awsome H1</h1><ul><li>yup></li></ul>',
    }
  ];

这是我的html

<div ng-repeat="group in groups">
  <li>{{group.name}}</li>
  <li>{{group.item}}</li>
</div>

我尝试只包含一些 angular 的 ng-sanitize，但我只看到了它是单个对象而不是数组的示例。

See here

我尝试将ng-bind-html="groups" 添加到主div，但我的数据显示为[object Object]。

有什么想法吗？任何帮助表示赞赏！

【问题讨论】：

你试过ng-bind-html="group.item"第二个<li>吗？
是的！感谢您的快速重播。想回答，我标记为正确
@mingos 我已经删除了我的答案。你可以继续发布你的:)
@javaCity 你不需要这样做 :)
@javaCity 当我注意到“新答案已发布”横幅时，我已经写下了我的答案。另外，由于您努力创建 plunker，我不希望您的工作浪费:)

标签： javascript html json angularjs

【解决方案1】：

ngBindHtml 指令接受包含 HTML 的字符串，并且应该直接在应该呈现该 HTML 字符串的标签上使用。不要在容器上使用它，而是直接在第二个<li> 上使用它，如下所示：

<div ng-repeat="group in groups">
    <li>{{group.name}}</li>
    <li ng-bind-html="group.item"></li>
</div>

@javaCoin 创建了一个 Plunker 来说明这一点；我们不要让它浪费并粘贴在这里：http://plnkr.co/edit/PFaxHqpyQvWqln5ABHRc?p=preview

【讨论】：

【解决方案2】：

ng-bind-html 位于您想要代码的特定项目上。

所以，你的例子变成了：

<div ng-repeat="group in groups">
  <li>{{group.name}}</li>
  <li ng-bind-html="group.item"></li>
</div>

http://plnkr.co/edit/CO5WUCgBnOEJrVoKKrEE?p=preview 展示了一个快速而肮脏的例子。

【讨论】：