如何将角度表达式打印为页面上的字符串？

Question

我有角度表达式 {{list}} 我不希望角度执行它 - 我想逃避它。 我想在我的页面上将它们打印为HTML代码。

  <xmp>

    <ul>
      <li ng-repeat="list in lists" class="input">
        {{list}}
      </li>
    </ul>

  </xmp>

我一直在

My Fiddle

做这样的事情最好的方法是什么？

Answer 1

在元素中使用'ng-non-bindable'。

示例：

<div ng-non-bindable>This is a {{profile}}</div>

只会显示：

This is a {{profile}}

Answer 2

您可以使用HTML注释，ng-non-bindable标记或甚至中断HTML元素，以多种方式转义角度花括号

<div ng-app="" ng-init="lists = ['one','two','three'];">
    echo: {{lists}}</br>
    escape 1: <code ng-non-bindable>{{lists}}</code></br>
    escape 2:{{lists}<!-- -->}</br>
    escape 3:{{lists}<span/>}</br>
</div>

Demo

请记住，您可以轻松地将花瓣更改为大括号，直到您想要的任何内容：

var app = angular.module('app')
  .config(['$interpolateProvider', function ($interpolateProvider) {
  $interpolateProvider.startSymbol('<%');
  $interpolateProvider.endSymbol('%>');
}]);

Demo

Answer 3

<xmp ng-non-bindable>
  <ul>
    <li ng-repeat="list in lists" class="input">{{list}}</li>
  </ul>
</xmp>

输出

  

数据

lists = ['one','two','three'];

  

角

<ul>
  <li ng-repeat="list in lists" class="input">{{list}}</li>
</ul>

  

输出

one
two
three

<强>更新

使用HTML语法...

以下是StackOverflow的工作方式。

对于这段HTML

<xmp>
  <ul>
    <li ng-repeat="list in lists" class="input">{{list}}</li>
  </ul>
</xmp>

他们使用这个......

<pre class="default prettyprint prettyprinted">
  <code>
    <span class="tag">&lt;xmp</span>
    <span class="pln"> </span>
    <span class="atn">ng-non-bindable</span>
    <span class="tag">&gt;</span><span class="pln"> </span>
    <span class="tag">&lt;ul&gt;</span><span class="pln"> </span>
    <span class="tag">&lt;li</span>
    <span class="pln"> </span>
    <span class="atn">ng-repeat</span>
    <span class="pun">=</span>
    <span class="atv">"list in lists"</span><span class="pln"> </span>
    <span class="atn">class</span><span class="pun">=</span>
    <span class="atv">"input"</span>
    <span class="tag">&gt;</span>
    <span class="pln">{{list}}</span>
    <span class="tag">&lt;/li&gt;</span>
    <span class="pln"> </span>
    <span class="tag">&lt;/ul&gt;</span>
    <span class="pln"> </span>
    <span class="tag">&lt;/xmp&gt;</span>
  </code>
</pre>

做一些类似但有自己造型的东西。看起来您将获得静态HTML以用于某些课程，但您可以使用ngClass以正确的类动态呈现字符串格式的呈现文本。