对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 相关文章推荐
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
浏览器常用高宽的jquery插件
Feb 24 Javascript
jquery构造器的实现代码小结
May 16 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
基于jquery实现五星好评
Nov 18 jQuery
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 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
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
node通过express搭建自己的服务器
2017/09/30 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
基于Python的ModbusTCP客户端实现详解
2019/07/13 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
python中什么是面向对象
2020/06/11 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
北大自主招生自荐信
2013/10/19 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
使用refresh_token实现无感刷新页面
2022/04/26 Javascript