对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 相关文章推荐
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
Javascript base64编码实现代码
Dec 02 Javascript
JavaScript学习笔记记录我的旅程
May 23 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
微信小程序 数据缓存实现方法详解
Aug 26 Javascript
vue递归实现树形组件
Jul 15 Vue.js
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 adodb分页实现代码
2009/03/19 PHP
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
JavaScript中this详解
2015/09/01 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
农村党支部先进事迹
2014/01/14 职场文书
护士辞职信范文
2014/01/19 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
大学生就业意向书范文
2014/04/01 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
《山中访友》教学反思
2016/02/24 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS