详解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 相关文章推荐
AngularJS语法详解
Jan 23 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
js实现自动图片轮播代码
Mar 22 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 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
海贼王动画变成“真人”后,凯多神还原,雷利太帅了!
2020/04/09 日漫
PHP中基本符号及使用方法
2010/03/23 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
php程序内部post数据的方法
2015/03/31 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
python实现Floyd算法
2018/01/03 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
小学岗位竞聘方案
2014/01/22 职场文书
小学毕业感言50字
2014/02/16 职场文书
工程承包协议书
2014/04/22 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
党员评议思想汇报
2014/10/08 职场文书
财务整改报告范文
2014/11/05 职场文书
同事欢送会致辞
2015/07/31 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
使用Redis实现分布式锁的方法
2022/06/16 Redis