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)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容