对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 相关文章推荐
jquery插件 cluetip 关键词注释
Jan 12 Javascript
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
vue addRoutes路由动态加载操作
Aug 04 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
一个基于PDO的数据库操作类(新) 一个PDO事务实例
2011/07/03 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
JS模板实现方法
2013/04/03 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
AngularJS内置指令
2015/02/04 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
Python自定义一个异常类的方法
2019/06/27 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
类如何去实现接口
2013/12/19 面试题
平面设计师工作职责范文
2013/12/03 职场文书
对标管理实施方案
2014/03/12 职场文书
继承公证书样本
2014/04/04 职场文书
珍惜资源保护环境的建议书
2014/05/14 职场文书
档案管理员岗位职责
2015/02/12 职场文书
公司备用金管理制度
2015/08/04 职场文书
感恩的心主题班会
2015/08/12 职场文书
导游词之青城山景区
2019/09/27 职场文书
python实现自定义日志的具体方法
2021/05/28 Python
Python selenium的这三种等待方式一定要会!
2021/06/10 Python