在Angular Scope Data中使用HTML标记

Using HTML tags in Angular Scope Data

本文关键字：HTML 标记 Angular Scope Data      更新时间：2023-09-26

在我的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，但我只看到了它是单个对象而不是数组的例子。

参见此处

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

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

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

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显示了一个快速而肮脏的例子。

相关文章：