Angular绑定数据时转义html标签

AngularJs在绑定数据时默认会以文本的形式出现在页面上,比如我现在有这样一段代码

<div ng-controller="testCtrl">{{data}}</div>

function testCtrl($scope) {
   $scope.data = ‘<span class="red">标红</span>‘;
}

那么在页面上必然会在也面上直接显示 <span class="red">标红</span>

要想让包含html标签的字符串,能在页面上正常显示,就必须将其转义,此时就要用到angularjs的ng-bind-html,它可以将包含html标签的字符串进行转义然后正确的显示在页面上要使用ng-bind-html必须引入angular-sanitize.min.js这个文件,并在定义模块的时候,在app.js中注入ngSanitize才可以使用ng-bind-html

 
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-sanitize.min.js"></script>

 <div ng-controller="testCtrl">
   <div ng-bind-html="data"></div>
 </div

function testCtrl($scope) {
    $scope.data = ‘‘<span class="red">标红</span>‘;//记得要在app.js里面注入ngSanitize
}

  

时间: 2024-10-11 20:37:02

Angular绑定数据时转义html标签的相关文章

angular 绑定数据时添加HTML标签被识别的问题

由于安全性,angular本身会对绑定的HTML标签属性进行转义,所以有些情况下我们需要用到绑定的数据里面传入html标签的时候, 需要用到一个服务:$sce $sce 服务下面的一个 $sce.trustAsHtml() 会对绑定的内容已html方式设置为可信任,同时也要对使用的绑定数据的地方进行 ng-bind-html 绑定 不同于 ng-bind 当然如果需要使用 {{}} 表达式的数据绑定方式也可以使用自定义过滤器 filter 的形式: filter: app.filter('to_

angularJS绑定数据时自动转义html标签

关于angularJS绑定数据时自动转义html标签 折磨了两天,最后发现答案竟如此简单,不过辛苦还是值得的,毕竟为了弄明白这一点又学习了更多代码. angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取带格式的文本时,无法正常的显示在页面中.而要对html进行转义,则要在数据绑定的html标签中使用ng-bind-html属性,该属性依赖与$sani

关于angularJS绑定数据时自动转义html标签

折磨了两天,最后发现答案竟如此简单,不过辛苦还是值得的,毕竟为了弄明白这一点又学习了更多代码. angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取带格式的文本时,无法正常的显示在页面中. 而要对html进行转义,则要在数据绑定的html标签中使用ng-bind-html属性,该属性依赖与$sanitize,也就是需要引入angular-saniti

关于angularJS绑定数据时自动转义html标签(转载-漆黑的小白)

原文:http://okashii.lofter.com/post/1cba87e8_29e0fabangularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取带格式的文本时,无法正常的显示在页面中. 而要对html进行转义,则要在数据绑定的html标签中使用ng-bind-html属性,该属性依赖与$sanitize,也就是需要引入angular-sani

Angular绑定数据

1. 绑定数据 { 1.在组件ts文件中定义属性:public 属性名 =  ‘数据’ 2.在组件中html中定义:{{属性名}} } 2. 在html获得ts中的值(也可以绑定图片src) { 静态属性:title = ‘ming’ 动态属性:[title] = ‘ts中属性名字’ } 3. Html获得ts中标签 Html中:[innerHTML] = ‘content’ ts中:public content = ‘<h2>你好<h2>’; 4. 绑定样式和类名 [ngClas

MySql数据库-查询、插入数据时转义函数的使用

最近在看一部php的基础视频教程,在做案例的时,当通过用户名查询用户信息的时候,先使用了转义函数对客户提交的内容进行过滤之后再交给sql语句进行后续的操作.虽然能看到转义函数本身的作用,但是仍然有一些疑惑. 疑惑一:当转义数据后,数据中会增加一些反斜杠,为了能查找出对应的数据,那么原来存在数据库中的数据是不是也已经被保存成含有反斜杠的了? 疑惑二:转义数据后再向数据库中插入数据,保存在数据库中的数据是否会含有过滤后的反斜杠? 带着这些疑问对用户提交的表单进行测试. echo get_magic_

使用Eval()绑定数据时使用三元运算符

ASP.NET邦定数据“<%#Eval("Sex")%>”运用三元运算符: <%#(Eval("Sex", "{0}") == "01") ? "男" : "女"%> <%#(Convert.ToInt32(Eval("NowDate","{0}"))>60)?Convert.ToInt32(Eval("

后台给GridView绑定数据时给每一行添加一个JS方法

--------JS function ReturnDictionaryValues(srcElement) { top.document.getElementById("_DialogFrame_a1").contentWindow.document.getElementById('txt_CAR_ID').value=srcElement.cells[0].innerText; top.document.getElementById("_DialogFrame_a1&qu

表单提交 防注入XSS 1入库时转义、后台 2出库转义、前台

第一种 入库过滤js 自动填充时过滤js代码class GoodsModel extends Model{ // 填充 protected $_auto = [ // 自己补充填充规则 // 描述中 处理掉script部分 ['description', 'mkDescription', self::MODEL_BOTH, 'callback'], // 仅仅需要在插入维护 ['created_at', 'time', self::MODEL_INSERT, 'function'], // 更新