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>

我尝试过包含一些角度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

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

在Angular Scope Data中使用HTML标记

2 个答案: