对angularJs中$sce服务安全显示html文本的实例


Posted in Javascript onSeptember 30, 2018

如下所示:

<div ng-app="module" ng-controller="ctrl">
 {{data}}
 <hr>
 <div ng-bind-html="data"></div>
 <hr>
 <div ng-bind-html="title | trustHtml"></div>
</div>
<script>
 var m = angular.module('module', []);
 /*$sce服务写成过滤器*/
 m.filter('trustHtml',['$sce',function($sce){
  return function(data){
   return $sce.trustAsHtml(data);
  }
 }])
 m.controller('ctrl', ['$scope', '$sce', function ($scope, $sce) {
 /*第一种:不用过滤器的方式*/
  $scope.data = $sce.trustAsHtml('<h1 style="color:red;">angularJs</h1>');
   /*第二种:使用过滤器的方式*/
  $scope.title = '<h3 style="color:red;">angularJs</h3>';
 }]);
</script>

以上这篇对angularJs中$sce服务安全显示html文本的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
vue  自定义组件实现通讯录功能
Sep 30 #Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 #Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 #Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 #Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 #Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 #Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 #jQuery
You might like
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
prototype 的说明 js类
2006/09/07 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
jQuery实现获取绑定自定义事件元素的方法
2015/12/02 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
在python中bool函数的取值方法
2018/11/01 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
python实现低通滤波器代码
2020/02/26 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
汉森批发:Hansen Wholesale
2018/05/24 全球购物
中国制造网:Made-in-China.com
2019/10/25 全球购物
Java基础知识面试要点
2016/07/29 面试题
为什么group by 和order by会使查询变慢
2014/05/16 面试题
化学相关工作求职信
2013/10/02 职场文书
化工机械应届生求职信
2013/11/04 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
公司合作意向书
2014/04/01 职场文书
OpenCV中resize函数插值算法的实现过程(五种)
2021/06/05 Python