在模板中直接:

在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元素的更多相关文章

  1. AngularJS 表达式中添加过滤器实例

    过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中 历练实例: <!DOCTYPE html><html><head><meta http-equiv ...

  2. AngularJS表达式

    1. AngularJS使用表达式把数据绑定到HTML. 2. AngularJS表达式的特点: 表达式写在双大括号内:{{表达式}}. 表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之 ...

  3. AngularJS开发指南5:AngularJS表达式详解

    AngularJS表达式类似Javascript的代码片段,通常在数据绑定中用到,写在双大括号中,如:{{表达式}}.表达式是用$parse方法来处理的. 下面是一些合法的AngularJS表达式 1 ...

  4. AngularJS 开发中常犯的10个错误

    简介 AngularJS是目前最为活跃的Javascript框架之一,AngularJS的目标之一是简化开发过程,这使得AngularJS非常善于构建小型app原型,但AngularJS对于全功能的客 ...

  5. AngularJS select中ngOptions用法详解

    AngularJS select中ngOptions用法详解   一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...

  6. (转载)MySQL LIKE 用法:搜索匹配字段中的指定内容

    (转载)http://www.5idev.com/p-php_mysql_like.shtml MySQL LIKE 语法 LIKE 运算符用于 WHERE 表达式中,以搜索匹配字段中的指定内容,语法 ...

  7. 【转】angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  8. linq 在查询表达式中处理异常

    在查询表达式的上下文中可以调用任何方法. 但是,我们建议避免在查询表达式中调用任何会产生副作用(如修改数据源内容或引发异常)的方法. 此示例演示在查询表达式中调用方法时如何避免引发异常,而不违反有关异 ...

  9. AngularJS进阶(十七)在AngularJS应用中实现微信认证授权遇到的坑

    在AngularJS应用中集成微信认证授权遇到的坑 注:请点击此处进行充电! 前言 项目开发过程中,移动端新近增加了一个功能"微信授权登录",由于自己不是负责移动端开发的,但最后他 ...

随机推荐

  1. WinForm------BarManager中各种属性设置

    1.offset:红色Tool距离左边Tool的偏移量

  2. 自然语言16.1_Python自然语言处理学习笔记之信息提取步骤&分块(chunking)

    QQ:231469242 欢迎喜欢nltk朋友交流 http://www.cnblogs.com/undercurrent/p/4754944.html 一.信息提取模型 信息提取的步骤共分为五步,原 ...

  3. texlive2015+texstudio

    编译器 texlive2015 编辑器 texstudio

  4. C/C++宏中#与##的讲解

    http://www.cnblogs.com/morewindows/archive/2011/08/18/2144112.html

  5. Linux--文件查找命令

    一.简介查找文件的几个命令: 1.which :查找可执行文件的位置 2.whereis:查找文件的位置,可以找到可执行命令和man page 3.locate:配合数据库查看文件位置 4.find: ...

  6. OC-常见错误 方法与函数的区别

    对象方法: 1,减号 - 2,声明必须写在@interface和@end之间   实现必须写在@implement 和@end之间 3,对象方法只能由对象来调用 4,对象方法归类.对象所有 函数: 函 ...

  7. 浅谈JavaScript中的正则表达式

    引言 对于正则表达式我想作为程序员肯定使用过它,那天书般的表达方式,我用一次就记住它了.这篇博客先介绍一些正则表达式的内容,然后介绍JavaScript中对正则表达式特有的改进.下面开始介绍正则表达式 ...

  8. ServletContext中常用方法

    ..获取Tomcat的Context的初始化参数. 1.获取Tomcat的server.xml中设置Context的初始化参数. 例如: <Context path="/testcon ...

  9. 使用code标签获得类似代码段的效果

    几乎所有的浏览器都支持 code标签 code标签, 顾名思义,就是代码标签, imply tell browser, that 后面的部分是表示计算机代码. 因此, 浏览器可以根据自己的特点来显示这 ...

  10. ubuntu用apt-get安装memcache

    转自:http://yangfutao2000.blog.163.com/blog/static/12162588201151635856858/ 先安装服务器端: apt-get install m ...