对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 相关文章推荐
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
js中开关变量使用实例
Feb 24 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
JavaScript+HTML5实现的日期比较功能示例
Jul 12 Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
基于vue hash模式微信分享#号的解决
Sep 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 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
vuex的简单使用教程
2018/02/02 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
python Crypto模块的安装与使用方法
2017/12/21 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
Python IDLE清空窗口的实例
2018/06/25 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
巴西女装购物网站:Eclectic
2018/04/24 全球购物
会计专业毕业生自我鉴定
2013/10/29 职场文书
安全技术说明书
2014/05/09 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
法制主题班会教案
2015/08/13 职场文书
Python&Matlab实现樱花的绘制
2022/04/07 Python