angularjs表达式中的HTML内容,如何不转义,直接表现为html元素
在模板中直接:
在ionic中直接使用:
<p class="contentwen" ng-bind-html="detial.content"></p> //转译了html
默认情况下,AngularJS对会对插值指令求职表达式(模型)中的任何HTML标记都进行转义,例如以下模型:
$scope.msg = “hello,<b>world</b>!”
<p>{{msg}}</p>
渲染过程会对b标签进行转义,他们会议纯文本显示而非标记;
插值指令会对模型中任意html内容进行转义,这是为了防止html注入攻击。
如果因为某种理由,包含html标记的模型要被浏览器求职和渲染,那么可以用ng-bind-html-unsafe指令来关掉默认的html标签转义:
<p ng-bind-html-unsafe=”msg”></p>;
使用ng-bind-html-unsafe指令需要极度小心,它应被限制在你完全信任并控制的html标签。
angularjs还有一个指令,ng-bind-html,它能够选择性净化制定html标签,同时允许其他标签被浏览器所解释,用法如下:
方法一:
1.导入angular-sanitize.js
2.在你app中报刊需要依赖的模块,如下:
var app = angular.module('myApp', ['ngSanitize']);
3.<p ng-bind-html=”msg”></p>;
方法二:
1. 导入angular-sanitize.js
2. 将其作为一个过滤器:
angular.module('myApp') .filter('to_trusted', ['$sce', function($sce){ return function(text) { return $sce.trustAsHtml(text); }; }]);
3.<p ng-bind-html=”msg | to_trusted”></p>;
angularjs表达式中的HTML内容,如何不转义,直接表现为html元素的更多相关文章
- AngularJS 表达式中添加过滤器实例
过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中 历练实例: <!DOCTYPE html><html><head><meta http-equiv ...
- AngularJS表达式
1. AngularJS使用表达式把数据绑定到HTML. 2. AngularJS表达式的特点: 表达式写在双大括号内:{{表达式}}. 表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之 ...
- AngularJS开发指南5:AngularJS表达式详解
AngularJS表达式类似Javascript的代码片段,通常在数据绑定中用到,写在双大括号中,如:{{表达式}}.表达式是用$parse方法来处理的. 下面是一些合法的AngularJS表达式 1 ...
- AngularJS 开发中常犯的10个错误
简介 AngularJS是目前最为活跃的Javascript框架之一,AngularJS的目标之一是简化开发过程,这使得AngularJS非常善于构建小型app原型,但AngularJS对于全功能的客 ...
- AngularJS select中ngOptions用法详解
AngularJS select中ngOptions用法详解 一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...
- (转载)MySQL LIKE 用法:搜索匹配字段中的指定内容
(转载)http://www.5idev.com/p-php_mysql_like.shtml MySQL LIKE 语法 LIKE 运算符用于 WHERE 表达式中,以搜索匹配字段中的指定内容,语法 ...
- 【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- linq 在查询表达式中处理异常
在查询表达式的上下文中可以调用任何方法. 但是,我们建议避免在查询表达式中调用任何会产生副作用(如修改数据源内容或引发异常)的方法. 此示例演示在查询表达式中调用方法时如何避免引发异常,而不违反有关异 ...
- AngularJS进阶(十七)在AngularJS应用中实现微信认证授权遇到的坑
在AngularJS应用中集成微信认证授权遇到的坑 注:请点击此处进行充电! 前言 项目开发过程中,移动端新近增加了一个功能"微信授权登录",由于自己不是负责移动端开发的,但最后他 ...
随机推荐
- js007-函数表达式
js007-函数表达式 本章内容 1.函数表达式的特征 2.使用函数实现递归 3.使用闭包定义私有量 定义函数的方式有两种:一:函数声明,二:函数表达式 函数声明: function function ...
- JSP 属性范围
参考文献:http://www.cnblogs.com/xdp-gacl/p/3781056.html 一.属性范围 所谓的属性范围就是一个属性设置之后,可以经过多少个其他页面后仍然可以访问的保存范围 ...
- cmake 编译 c++ dll 的一个例子(更新2:增加 python 调用方法)
CMakeLists.txt project(xxx) add_library(xxx SHARED xxx.cpp) add_executable(yyy yyy.cpp) target_link_ ...
- JS实现的一个query字符串转Json格式数据的方法
输入字符串的格式是 a=1&b=2&c=3 $.par2Json = function (string, overwrite) { var obj = {}, pairs = stri ...
- ecshop商品-》获取促销商品
lib_goods.php->function get_promote_goods(){} /** * 获得促销商品 * * @access public * @return array */ ...
- php构造函数连接数据库
index.php require_once("mysql.config.php"); require_once("mysql.class.php"); ech ...
- 使用.net Stopwatch class 来分析你的代码
当我们在调试,优化我们的代码的时候,想知道某段代码的真正的执行时间,或者我们怀疑某段代码,或是某几段代码执行比较慢, 需要得到具体的某段代码的具体执行时间的时候.有一个很好用的类Stopwatch. ...
- chain.doFilter(request,response)含义
过滤器的生命周期一般都要经过下面三个阶段: 初始化 当容器第一次加载该过滤器时,init() 方法将被调用.该类在这个方法中包含了一个指向 Filter Config 对象的引用.我们的过滤器实际上并 ...
- GoLang之基础
GoLang之基础 Go是一种并发的.带垃圾回收的.快速编译的语言. 经典的"hello world"入门: package main import "fmt" ...
- Python之路【第七篇续】:进程、线程、协程
Socket Server模块 SocketServer内部使用 IO多路复用 以及 “多线程” 和 “多进程” ,从而实现并发处理多个客户端请求的Socket服务端.即:每个客户端请求连接到服务器时 ...