对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实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
json数据格式常见操作示例
Jun 13 Javascript
vue+iview实现手机号分段输入框
Mar 25 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下打开URL地址的几种方法小结
2010/05/16 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
Node 自动化部署的方法
2017/10/17 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
python获取网页状态码示例
2014/03/30 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
python爬取代理ip的示例
2020/12/18 Python
flask框架中的cookie和session使用
2021/01/31 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
村容村貌整治方案
2014/05/21 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
vue3中provide && inject的使用
2021/07/01 Vue.js