5、AngularJS 直接绑定显示html ($sce、$sanitize服务)
1、直接使用$sce服务(angularjs中:$sce.trustAsHtml($scope.snippet)。html:ng-bind-html="snippet")
以下代码输出:
<div ng-bind-html="snippet"></div> <script>
angular.module('sanitizeExample', [])
.controller('ExampleController', ['$scope', '$sce', function($scope, $sce) {
//测试用字符串
$scope.snippet =
'<p style="color:blue">an html\n' +
'<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' +
'snippet</p>';
//$sce 服务trustAsHtml 进行编译
$scope.deliberatelyTrustDangerousSnippet = function() {
return $sce.trustAsHtml($scope.snippet);
};
}]);
</script>
2、使用angular-sanitize.js 模块中的$sanitize服务,信任字符串,直接显示html
以下代码输出:
<div ng-bind-html="snippet"></div> <script>
angular.module('sanitizeExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope) {
//测试用字符串
$scope.snippet =
'<p style="color:blue">an html\n' +
'<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' +
'snippet</p>';
}]);
</script>
3、整体demo代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body ng-app="sanitizeExample">
<div ng-controller="ExampleController">
Snippet: <textarea ng-model="snippet" cols="60" rows="3"></textarea>
<table>
<tr>
<td>Directive</td>
<td>How</td>
<td>Source</td>
<td>Rendered</td>
</tr>
<tr id="bind-html-with-sanitize">
<td>ng-bind-html</td>
<td>Automatically uses $sanitize</td>
<td><pre><div ng-bind-html="snippet"><br/></div></pre></td>
<td><div ng-bind-html="snippet"></div></td>
</tr>
<tr id="bind-html-with-trust">
<td>ng-bind-html</td>
<td>Bypass $sanitize by explicitly trusting the dangerous value</td>
<td>
<pre><div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div></pre>
</td>
<td><div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div></td>
</tr>
<tr id="bind-default">
<td>ng-bind</td>
<td>Automatically escapes</td>
<td><pre><div ng-bind="snippet"><br/></div></pre></td>
<td><div ng-bind="snippet"></div></td>
</tr>
</table>
</div>
<script>
angular.module('sanitizeExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', '$sce', function($scope, $sce) {
$scope.snippet =
'<p style="color:blue">an html\n' +
'<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' +
'snippet</p>';
$scope.deliberatelyTrustDangerousSnippet = function() {
return $sce.trustAsHtml($scope.snippet);
};
}]);
</script>
</body>
//修改为本地angular.js 相对地址
<script src="angular.min.js" type="text/javascript"></script>
<script src="angular-sanitize.js" type="text/javascript"></script>
</html>
5、AngularJS 直接绑定显示html ($sce、$sanitize服务)的更多相关文章
- angularjs 指令—— 绑定策略(@、=、&)
angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到 ...
- AngularJS进阶(十)AngularJS改变元素显示状态
AngularJS改变元素显示状态 前言 本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态. 控制html元素显示和隐藏有n种方法:ht ...
- AngularJS参数绑定 --AngularJS
AngularJS参数绑定有三种方式.第一种插值表达式“{{}}”表示,第二种在标签中使用ng-bind属性表示,第三种针对input框(标签)的ng-module属性表示.针对三种参数绑定方式,设定 ...
- angular-ngSanitize模块-$sanitize服务详解
本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块. 要学习这个服务,先要了解另一个指令: ng-bing-html. 顾名思义,ng-bind-html和 ...
- 【AngularJS学习笔记】01 指令、服务和过滤器
AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 比如: ng-app 指令初始化一个 AngularJS 应用程序.注意ng-app一般为空,如果值不为空,就得加这样一句代码va ...
- AngularJS进阶(四十)创建模块、服务
AngularJS进阶(四十)创建模块.服务 学习要点 使用模块构架应用 创建和使用服务 为什么要使用和创建服务与模块? 服务允许你打包可重用的功能,使之能在此应用中使用. 模块允许你打包可重用的功能 ...
- AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...
- AngularJS事件绑定的使用详解
本文和大家分享的主要是AngularJS中事件绑定相关知识点,希望通过本文的分享,对大家学习和使用AngularJS有所帮助. 1.绑定事件:表达式.事件方法名: 2.绑定点击事件实例:显示.隐藏页面 ...
- AngularJS中实现显示或隐藏动画效果的3种方式
本篇体验在AngularJS中实现在"显示/隐藏"这2种状态切换间添加动画效果. 通过CSS方式实现显示/隐藏动画效果 思路: →npm install angular-anima ...
随机推荐
- python程序—利用socket监控端口
利用socket监控服务器端口,端口不通时,发邮件提醒 import yagmail #导入yagmail模块 import re #导入re模块,进行正则匹配 import socket #导入so ...
- 排查OPENSTACK浮动IP被占用记录
在openstack上新建机器时,发现用户无法登陆. 检查该机器的22端口,返回 Connection refused. ping该IP,发现可以ping通. 释放该浮动ip,然后去ping该 ...
- 本地连接属性:Internet协议版本4(TCP/IPv4)打开闪退解决办法
1.命令窗口配置网络连接指定IP netsh interface ip set address "本地连接" static IP地址 子网掩码 默认网关 例:netsh inter ...
- NRF52832与W25Q80通信
1 NRF52832SPI主机的功能描述 nRF52832SPIM的主要特征 3个SPI实例 支持SPI的模式0到模式3 支持DMA Individual selection of IO pin fo ...
- 【调试】Idea如何远程debug之tomcat war包启动
一.修改tomcat配置并启动 1.修改tomcat bin目录下的startup.sh配置,定位startup.sh最后一行,使用jpda start启动 即将exec "$PRGDIR ...
- HBuild 连接安卓手机
设备:一部电脑.一部安卓手机.一条数据线 1. 数据线连接电脑和安卓手机: 2. 安卓手机--> 设置 -- > 开发者选项 --> 点进去,找到USB调试并且打开,例: ...
- 面试题3--数组中的重复数字(new数组的新写法)
总是忘了一些条件的判断,比如非空或者其他之类. #include<iostream> using namespace std; int Frepeat(int num[],int leng ...
- Table 类(数据表基类)
只修改数据表某条记录的部分字段(究极进化): public class TableHelper { private Dictionary<string, object> temp; pub ...
- .NET controller传给view的bool类型
问题: 在view中访问该变量是False,不是字符串,也不是bool类型的false. 解决方法: controller: ViewBag.Test = false; view中得到false值: ...
- element-- 修改MessageBox 弹框 中确定和取消按钮顺序
需求:修改弹框中的 取消/确定按钮顺序,及头部和底部背景颜色; 原ui效果图 需求ui效果图 方法:对取消及确定按钮自定义类名,样式重写