ng-bind-html 改变了 html 结构，为什么？答案

【问题标题】：ng-bind-html change the html structure, why?ng-bind-html 改变了 html 结构，为什么？
【发布时间】：2016-05-26 15:00:43
【问题描述】：

我通过 AngularJS 的 $http 从后端获取 HTML 代码，并将检索到的代码记录下来，没有问题，但是在浏览器中看到它，html 结构发生了变化。这是我得到的代码：

<a href="  http://www.google.com" target="_blank">
    <figure>
       <img class="img-responsive" src="/sites/Satellite;jsessionid=pk_tbxorbyJ4KrsWxo1jaVBFYvQPx1VovEs2GpjWziIk6cFaL50_!650994948?blobcol=urldata&amp;blobkey=id&amp;blobtable=MungoBlobs&amp;blobwhere=1462843196206&amp;ssbinary=true" />

    </figure>
    <p> Some text</p>
</a>

这就是浏览器显示的内容：

<a href="  http://www.google.com" target="_blank">
</a>
<figure>
    <img class="img-responsive" src="/sites/Satellite;jsessionid=pk_tbxorbyJ4KrsWxo1jaVBFYvQPx1VovEs2GpjWziIk6cFaL50_!650994948?blobcol=urldata&amp;blobkey=id&amp;blobtable=MungoBlobs&amp;blobwhere=1462843196206&amp;ssbinary=true">
</figure>
<p> some text</p>

然后我做了以下测试，记录检索到的代码

$log.debug(vm.myHtml);

然后用

清理代码

$log.debug($sce.getTrustedHtml(vm.myHtml))

我得到了相同的先前差异。

【问题讨论】：

你的根 HTML 顶部有 <!doctype html> 吗？
你的浏览器是什么？ demo 适用于我的浏览器（Google Chrome 版本 50.0.2661.102 m）
@AlonEitan 是的，我有
@YinGang 我在 Google Chrome 版本 49.0.2623.112 (64-bit) for Mac 中测试
你解决了吗？我似乎在锚标记中嵌套块元素时遇到了同样的问题。我玩过其他一些人的 ng-bind-html 演示，它们似乎允许嵌套块元素就好了。不太清楚为什么它不允许这种嵌套。我在 chrome 和 firefox 上都试过了，都遇到了同样的问题。

标签： html angularjs sanitize ng-bind-html

【解决方案1】：

我遇到了同样的问题，所以在AngularJS docs 上使用了 Plunker。

然后我通过在<a> 标记中放置一些<h1> 标记对其进行了修改（参见plunker）。好消息是它适用于这个最基本的案例。这让我挠了很久。

最后，我只是猜测我使用的 ngSanitize 版本可能有点旧，并且在某些时候他们稍微改变了标签的映射、拆分和渲染方式。我翻阅了历史，但找不到任何东西。最后，我更新到 1.5.7 与 plunker 中的版本相同。又笑了:)

【讨论】：