angular用$sce服务来过滤HTML标签
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 code:
<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>
angular用$sce服务来过滤HTML标签的更多相关文章
- 【转载】AngularJS 用$sce服务来过滤HTML标签,解决无法正确显示后台传递的html标签
angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有 ...
- angular中的ng-bind-html指令和$sce服务
angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有 ...
- angular中的ng-bind-html和$sce服务
输入的内容存储在数据库中,然后再在数据库中将这些数据读写到页面上,比如你使用了某个第三方的脚本或者库.加载了一段html等等,可能会多了一些css的样式(显示在界面上) 这个时候我们可以利用angul ...
- angular ng-bind-html $sce.trustAsHtml
使用ng-bind-html和$sce.trustAsHtml显示有html符号的内容 angularjs的强大之处之一在于它的双向数据绑定的功能,我们通常会使用data-ng-bind或者dat ...
- Angular.js之服务与自定义服务学习笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- angular的uiRouter服务学习(3)
本篇接着上一篇 angular的uiRouter服务学习(2) 继续讲解uiRouter的用法 本篇主要讲解uiRouter的多个命名的视图 我们可以给ui-view元素添加ui-view的值来给它命 ...
- php有效的过滤html标签,js代码,css样式标签
过滤html标签�php中太简单了,我们可以直接使用strip_tags函数来实现了,下面给各位整理了一些关于 strip_tags函数的例子. php过滤html的函数:strip_tags(str ...
- java正则表达式过滤html标签
import java.util.regex.Matcher; import java.util.regex.Pattern; /** * <p> * Title: HTML相关的正则表达 ...
- 运用正则表达式在Asp中过滤Html标签代码的四种不同方法
Function RemoveHTML(strHTML)Dim objregExp, Match, MatchesSet objRegExp = New RegexpobjRegExp.IgnoreC ...
随机推荐
- qrcode.js的识别解析二维码图片和生成二维码图片
qrcode只通过前端就能生成二维码和解析二维码图片, 首先要引入文件qrcode.js,下载地址为:http://static.runoob.com/download/qrcodejs-04f46c ...
- Sublime常用插件安装大全
作为前端人员,要找一个很顺手的编辑器真的不容易,我向大家推荐的一款实用前端开发神器,不但占地小,且插件很多,很强大. 下面我向大家介绍一下它的安装及插件的使用方法. 一.安装及安装emmet插件 首先 ...
- meterpreter > migrate 1548
1548 1500 explorer.exe x86 0 LIXIULI-VCS86VR\test C:\WINDOWS\Explorer.EXE 19 ...
- Visual Studio 2017 如何打开Model Browser(实体数据模型浏览器)
写一个笔记,记录下在Visual Studio 2017中打开EF模型浏览器的步骤和方法,方便以后忘记了可以重新查阅.主要是现在VS功能越来越多,很多功能模块/界面要开启都是有先决条件,总之隐藏的很深 ...
- 工作流性能优化(敢问activiti有扩展性?)(1)
工作流待办(首页待办列表),加载缓慢,activiti本机,看了代码又是全部数据加载到内存,然后代码过滤,我为什么又说又呢? 用VisualVM做性能测试: 之前同事给的解决方案: 1.把&quo ...
- vim 编辑器的使用方法
vim 命令模式 默认打开文件为命令模式 命令行模式 shift+: 命令行模式 编辑模式 i 编辑模式 Esc 切换命令模式 命令模式 -----字符操作 i 当 ...
- web跨域及cookie相关知识总结
原文:web跨域及cookie相关知识总结 之前对于跨域相关的知识一致都很零碎,正好现在的代码中用到了跨域相关的,现在来对这些知识做一个汇总整理,方便自己查看,说不定也可能对你有所帮助. 本篇主要 ...
- Bootstrap 历练实例 - 折叠(Collapse)插件方法
方法 下面是一些折叠(Collapse)插件中有用的方法: 方法 描述 实例 Options:.collapse(options) 激活内容为可折叠元素.接受一个可选的 options 对象. $(' ...
- AngularJS1.X版本双向绑定九问
前言 由于工作的原因,使用angular1.x版本已经有一段时间了,虽然angualr2升级后就完全重构了,但每个版本存在也有一定的道理.话不多说,进入正题. 1.双向绑定的原理是什么? Angual ...
- (76)zabbix_agentd.conf配置文件详解
############ GENERAL PARAMETERS ################# ### Option: PidFile# Name of PID file.# Agent PID文 ...