如何使用AngularJS模板呈现html

Question

这是我的模板：

<div class="span12">
  <ng:view></ng:view>
</div>

这是我的视图模板：

html prettyprint-override"><h1>{{stuff.title}}</h1>

{{stuff.content}}

我得到的内容是html，我想在视图中显示，但我得到的只是原始html代码。如何呈现HTML？

Answer 1

在angular 4中，我们可以使用innerHTML属性代替绑定html属性。

在我的例子中，它是有效的，我使用的是angular 5。

<div class="chart-body" [innerHTML]="htmlContent"></div>

在里面ts文件

let htmlContent = 'This is the `<b>Bold</b>` text.';

Answer 2

为此，我使用自定义过滤器。

在我的应用程序中：

myApp.filter('rawHtml', ['$sce', function($sce){
  return function(val) {
    return $sce.trustAsHtml(val);
  };
}]);

然后，在视图中：

<h1>{{ stuff.title}}</h1>

<div ng-bind-html="stuff.content | rawHtml"></div>

Answer 3

使用-

<span ng-bind-html="myContent"></span>

你需要告诉angular不要逃避它。