对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 相关文章推荐
js函数般调用正则
Apr 08 Javascript
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 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
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
Python面向对象之继承代码详解
2018/01/29 Python
python调用百度语音REST API
2018/08/30 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
机关门卫制度
2014/02/01 职场文书
酒店辞职书范文
2015/02/26 职场文书
Java设计模式中的命令模式
2022/04/28 Java/Android