场景:系统应用的后台某些模块可能因为需求要求使用富文本编辑器,而如果富文本内编辑的内容如果不做去除样式处理的话,富文本一般编辑个性的内容是含有大量的Html格式代码,最终会以此储存到数据库里面,往往这种数据最终在页面展示的时候还要以样式显示出来改怎么做!
常规Js处理方式
一般使用document.getElementById('xxxxx').innerHTML =str; 注:xxxxx页面元素Id,str后台返回带Html格式的字符串,这是常规Javascript的处理方式。
Angular1.x里如何实现
主角 AngularJS $sce
$sce 服务是AngularJs提供的一种严格上下文转义服务。严格的上下文转义(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模式。由用户通过ng-bind-html绑定任意HTML语句就是这方面的一个例子。我们称这些上下文转义为特权或者SCE。
支持哪些信任的上下文类型?
- $sce.HTML 将HTML代码安全的绑定到应用程序中。
- $sce.CSS 将CSS样式代码安全的绑定到应用程序中。
- $sce.URL 将URL安全的绑定到应用程序中并保证其可用。比如(<a>里面的 href,<img>里的src等)
- $sce.RESOURCE_URL 将RESOURCE_URL安全的绑定到应用程序中并保证其可用。比如(ng-href,ng-src)
- $sce.JS 将JAVASCRIPT代码安全的绑定到应用程序中。
实现方式 trustAsHtml(value)
Js部分:
$scope.viewModel.measureTableTopic.content = $sce.trustAsHtml($scope.viewModel.measureTableTopic.content);
Html部分:
<p ng-bind-html="viewModel.measureTableTopic.content"></p>
注:使用$sce需要在Controller进行声明(注入);页面绑定的时候需要使用ng-bind-htmld;直接以model的形式绑定不需要加{{}}.