详解angular用$sce服务来过滤HTML标签


Posted in Javascript onApril 11, 2017

angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model。但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签.对于angular 1.2一下的版本我们必须要使用$sce这个服务来解决我们的问题。它可以通过使用$sce.trustAsHtml()。该方法将值转换为特权所接受并能安全地使用“ng-bind-html”。

controller('HealthEducationDetailCtrl', ['$sce','$scope', 'Storage', '$state', 'HomeService','$stateParams','$ionicTabsDelegate',
  function ($sce,$scope, Storage, $state, HomeService,$stateParams,$ionicTabsDelegate) {
   $scope.$on('$ionicView.beforeEnter', function() {
    //关闭所有的tab选项卡
    $ionicTabsDelegate.showBar(false);
   });

   //保证健康教育详情页面可以显示各自的标题
   $scope.title=$stateParams.ARTICLE_TITLE;
   var ARTICLE_ID=$stateParams.ARTICLE_ID;
   var param={ARTICLE_ID:ARTICLE_ID};
   HomeService.getHealthArticleDetail(param);
   //加载健康教育详情
   $scope.healthArticleDetail=[];
   $scope.$on('HomeService.getHealthArticleDetail',function (event, data) {
    $scope.healthArticleDetail=data;
    //richTextReplace是解析html标识符
    // $scope.trustHtml=Storage.richTextReplace($scope.healthArticleDetail.ARTICLE_CONTENTS);
    $scope.trustHtml=$sce.trustAsHtml($scope.healthArticleDetail.ARTICLE_CONTENTS);
   })

   $scope.$on('$ionicView.beforeLeave', function() {
    //打开所有tab选项卡
    $ionicTabsDelegate.showBar(true);
   });
  }])

html:

<ion-view view-title="{{title}}" ng-view-title="title">
 <ion-content >
  <div style="width: 100%; padding: 10px 15px;">
   <div ng-bind-html="trustHtml"></div>
  </div>
 </ion-content>
</ion-view>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
jquery last-child 列表最后一项的样式
Jan 22 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
js中unicode转码方法详解
Oct 09 Javascript
13个PHP函数超实用
Oct 21 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
node.js命令行教程图文详解
May 27 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
javascript canvas检测小球碰撞
Apr 17 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 #Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 #Javascript
js 获取今天以及过去日期
Apr 11 #Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 #Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 #Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 #Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 #Javascript
You might like
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
使用Node.js实现base64和png文件相互转换的方法
2020/03/11 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
[03:11]TI9战队档案 - Alliance
2019/08/20 DOTA
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
Python字符串的常见操作实例小结
2019/04/08 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
环境科学专业个人求职的自我评价
2013/11/28 职场文书
个人自荐书
2013/12/20 职场文书
创先争优制度
2014/01/21 职场文书
美术教师岗位职责
2014/03/18 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
万能检讨书
2015/01/27 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书