在angularJS中，如何将包含标记的模型渲染为标记（未转义）

Question

我试图通过角度过滤器调用showdown来制作带有预览的降价编辑器

<textarea ng-model="data.text"></textarea>
<div class="preview">{{data.text|markdown}}</div>

我设法将markdown标记动态转换为html但是在渲染时屏幕上的实际输出是这样的：

  

<h1 id="thisisaheader">This is a header</h1>

看起来生成的标记已转义。我如何渲染它未转义？

Answer 1

您需要使用ng-bind-html-unsafe：

<div class="preview" ng-bind-html-unsafe="data.text|markdown"></div>

由您来保证内容是可信的。

如果您正在使用Angular 1.2 RC1，那么您应该使用ng-bind-html以及新的Strict Contextual Escaping服务（简称$sce）。