对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 相关文章推荐
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
requireJS使用指南
Apr 27 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
Underscore之Array_动力节点Java学院整理
Jul 10 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
vue的常用组件操作方法应用分析
Apr 13 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 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
php显示页码分页类的封装
2017/06/08 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Python面向对象类的继承实例详解
2018/06/27 Python
python 解压pkl文件的方法
2018/10/25 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
基于python3实现倒叙字符串
2020/02/18 Python
python批量生成条形码的示例
2020/10/10 Python
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
校庆筹备方案
2014/03/30 职场文书
高中生操行评语
2014/04/25 职场文书
鉴定评语大全
2014/05/05 职场文书
个人简历自荐信
2014/06/26 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书