对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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 Javascript
微信小程序异步处理详解
Nov 10 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 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
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
Python实现的rsa加密算法详解
2018/01/24 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
Python Web版语音合成实例详解
2019/07/16 Python
pytorch 模型可视化的例子
2019/08/17 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
EJB面试题
2015/07/28 面试题
职工小家建设活动方案
2014/08/25 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
项目转让协议书
2014/10/27 职场文书
小学老师对学生的评语
2014/12/29 职场文书
爱心募捐感谢信
2015/01/22 职场文书
李白故里导游词
2015/02/12 职场文书
工作保证书怎么写
2015/02/28 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
请病假条范文
2015/08/17 职场文书
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL