ng-bind-html Ändern Sie die HTML-Struktur, warum?

Question

Ich bekomme HTML-Code aus dem Backend über $ http von AngularJS, und protokolliert den Code abgerufen und ist in Ordnung, aber um es im Browser zu sehen, die HTML-Struktur geändert. Diese ist der Code, den ich bekommen:

<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> 

und das ist, was der Browser angezeigt:

<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> 

Dann habe ich den folgenden Test, log der Code abgerufen

$ log .debug (vm.myHtml);

und dann sanieren den Code mit

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

und ich den gleichen vorherigen Unterschied zu bekommen.

Answer 1

Ich hatte das gleiche Problem und spielte so mit dem Plunker, der auf der AngularJS docs verfügbar ist.

Ich habe es dann geändert, indem Sie einige <h1> Tags innerhalb <a> Tags (siehe plunker). Die gute Nachricht war, dass es in diesem grundlegendsten Fall funktioniert hat. Das hat mich schon ewig am Kopf kratzen lassen.

Am Ende habe ich nur vermutet, dass die Version von ngSanitize, die ich benutzte, vielleicht ein wenig alt war und irgendwann die Art und Weise wie die Tags gemappt, geteilt und dann gerendert wurden, etwas verändert hatte. Ich habe die Geschichte durchgesehen, konnte aber nichts finden. Am Ende wurde ich auf 1.5.7 aktualisiert, genauso wie die Version im Plunker. Und wieder lächeln :)