javascript - 在 Angular Scope Data 中使用 HTML 标签

Question

在我的 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]。

有什么想法吗？感谢您的帮助!

Answer 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