How to display display html(not parsed) in angular

问题:

I am trying to create some sort a sitemap for my app. Since I can't use a sitemap generator.

I want to be able to display something like this:

  <url>
    <loc>
    http://www.fff.com
    </loc>
  </url>
  <url>
    <loc>
    http://www.fff.com/blog/23442
    </loc>
  </url>

That way I can copy and past in a xml file. I tried something like this:

<code ngNonBindable>
  <url>
    <loc>
      http://www.fff.com/blog/23442
    </loc>
  </url>
</code>

This will only display: http://www.fff.com/blog/23442.

Anyway I can achieve this?

回答1:

That's because the html will get parsed to elements. You have to replace all the <and > with < and > respectively:

<code>
  &lt;url&gt;
    &lt;loc&gt;
    http://www.fff.com
    &lt;/loc&gt;
  &lt;/url&gt;
  &lt;url&gt;
    &lt;loc&gt;
    http://www.fff.com/blog/23442
    &lt;/loc&gt;
  &lt;/url&gt;
</code>

回答2:

<pre>
  {{content}}
</pre>

  content = `<url>
    <loc>
      http://www.fff.com/blog/23442
    </loc>
  </url>`;

Plunker example