在Angular中输出HTML片段

今天尝试用AngularJs做前端处理 JSON 数据,其中碰到 AngularJS 获取的是一段 HTML 文本(渲染文章主体部分),如果直接使用 data-ng-bind的话是被转义过的,使用 data-ng-bind-html则可以取消转义。

直接使用 data-ng-bind-html 的结果是:

1
Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context.

HTML 片段需要先使用 $sce.trustAsHtml(html_in_string) 将标记为信任,然后才可以使用 data-ng-bind-html="html_in_string" 取消转义,进而输出HTML片段,达到如期想要的结果。

正确写法如下:

JS部分:

1
2
data.content = $sce.trustAsHtml('这里填写你需要取消转义的html结构');
$scope.data = data;

HTML部分:

1
<div class="content" data-ng-bind-html="data.content"></div>

坚持原创技术分享,您的支持将鼓励我继续创作!