ng-bind-html-unsafe 不在 angularjs 中解析 html

Posted 2023-03-05

【中文标题】ng-bind-html-unsafe 不在 angularjs 中解析 html

【英文标题】：ng-bind-html-unsafe not parsing html in angularjs

【发布时间】：2013-06-18 03:50:17

【问题描述】：

我在 Angular 不解析 JSON 中提供的 html 时遇到了一些奇怪的问题。 我正在使用 ng-bind-html-unsafe 指令，该指令从 JSON 中获取字符串并将其输出到页面上，但浏览器没有解析 html。

我正在使用 angularjs V1.1.5，但也尝试过旧版本。

我的绑定标签如下所示：

<div class="announcement-wrapper" ng-repeat="announcement in announcements" id="announcement.announcementId">
  <p ng-bind-html-unsafe="announcement.content"></p>
</div>

提供绑定的 JSON 是：

"userId": "s123456",
"responseCode": "OK",
"responseMessage": "",
"timeStamp": 1371778685560,
"announcements": [
    
        "announcementId": 1518,
        "title": "Daves second announcement",
        "content": "<p>Announcement for Chad</p>",
        "releaseDate": "13 June 2013",
        "important": false,
        "read": true
    ,
    
        "announcementId": 1511,
        "title": "Onshore HE and TAFE Announcement",
        "content": "<p>This announcement is only for Onshore HE and TAFE persons onshore.</p><p>High Priority.</p>",
        "releaseDate": "04 June 2013",
        "important": false,
        "read": true
    
  ]

发生的情况是编码字符正在生成到页面上，只是浏览器没有将它们解析为实际的段落标签输出。例如。第二个公告正在页面上输出为

<p>This announcement is only for Onshore HE and TAFE persons onshore.</p><p>High Priority.</p>

我也尝试过使用 ng-bind-html 指令，并设置了 sanitize 依赖项，但两者都无法使用。毫无疑问，它很小，但我只需要一双新鲜的眼睛来看看......

提前致谢！

【问题讨论】：

快速注意 ng-bind-html-unsafe 不包含在 1.2 版中

【参考方案1】：

那是因为您使用< 和> 来表示括号的打开和关闭。

它们实际上将用作小于和大于符号而不是开始和结束标记。

您需要将announcements.content替换为小于和大于符号如下：

...
"content": "<p>Announcement for Chad</p>",
...

编辑：请参阅this 可能的所有 HTML 代码列表。您正在为“”使用 HTML 代码，因此您无需打开和关闭标签，而是获得该字符。

【讨论】：

谢谢。对字符进行编码的原因是为了防止 JSON 与 " 字符中断，但我们应该能够将这些字符转义，然后一切都会正常工作。

谢谢。这听起来很奇怪，但我有点知道这是问题所在，我只是无法让它在我的脑海中合乎逻辑。阅读完这篇文章后，我意识到我需要在使用 ng-bind-html 之前进行一些字符串替换。