Angular.js 直接输出html

在使用富文本编辑时候，经常会遇到把html通过模板赋值输出到页面的问题。在经过后端处理之后，直接使用{{}}模板赋值输出会得到带”<>”的html标签。

带尖括号的html

这当然不是我们想要的效果。如果是用angular1，这时候就要用到ng-bind-html这个指令。

ng-bind-html指令

配合$sce.trustAsHtml使用，

$sce的使用

界面效果就出来了--

界面效果

如果使用的是angular2或者以上，要输出html为内容，过程也大同小异，用的是[innerHTML]这个指令

innerHTML指令的使用

配合DomSanitizer使用，

DomSanitizer的引入

自定义assembleHTML方法，

自定义assembleHTML方法

这样就可以直接输出为HTML了。

其他诸如此类的方法，例如图片URL有unsafe：前缀。就可以用sanitizer.bypassSecurityTrustUrl(url)    过滤一下。

sanitizer.bypassSecurityTrustScript(script)

sanitizer.bypassSecurityTrustStyle(style)

sanitizer.bypassSecurityTrustResourceUrl(rurl)