对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 相关文章推荐
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
js浮动图片的动态效果
Jul 10 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
vue中添加与删除关键字搜索功能
Oct 12 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 Javascript
JavaScript 异步时序问题
Nov 20 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 ftp文件上传函数(基础版)
2010/06/03 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
js随机生成一个验证码
2017/06/01 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
Python实现二分法算法实例
2015/02/02 Python
Python 实现链表实例代码
2017/04/07 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
python解包用法详解
2021/02/17 Python
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
优乐美广告词
2014/03/14 职场文书
团队经理竞聘书
2014/03/31 职场文书
聘用意向书范本
2014/04/01 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
台式电脑蓝牙适配器怎么安装?台式电脑蓝牙适配器安装教程
2022/04/08 数码科技
GTX1650super好不好 gtx1650super显卡属于什么级别
2022/04/08 数码科技