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

由于安全性,angular本身会对绑定的HTML标签属性进行转义,所以有些情况下我们需要用到绑定的数据里面传入html标签的时候,

需要用到一个服务:$sce

$sce 服务下面的一个 $sce.trustAsHtml() 会对绑定的内容已html方式设置为可信任,同时也要对使用的绑定数据的地方进行 ng-bind-html 绑定 不同于 ng-bind

当然如果需要使用 {{}} 表达式的数据绑定方式也可以使用自定义过滤器 filter 的形式:

filter:

app.filter(‘to_trusted‘, [‘$sce‘, function ($sce) {
return function (text) {
    return $sce.trustAsHtml(text);
};

过滤器使用:

{{  data | to_trusted }}

或者

<p ng-bind-html="data | to_trusted"></p>

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

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

Angular绑定数据时转义html标签

AngularJs在绑定数据时默认会以文本的形式出现在页面上,比如我现在有这样一段代码 <div ng-controller="testCtrl">{{data}}</div> function testCtrl($scope) { $scope.data = '<span class="red">标红</span>'; } 那么在页面上必然会在也面上直接显示 <span class="red"

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

后台给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

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

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

mysql -2查询单个表的数据时添加各种条件

首先创建一个表格 CREATE TABLE classmate( id INT, cname VARCHAR(5), age INT, math DOUBLE, english DOUBLE, nature DOUBLE ); 再给表中填入数据 INSERT INTO classmate VALUES(1,'王三',12,34,55,12); INSERT INTO classmate VALUES(2,'李四',15,67,45,15); INSERT INTO classmate VALUE

jQuery EasyUI 没有数据时添加滚动条

onLoadSuccess : function(data) { //表头居中 $(".datagrid-htable td div").css({ "text-align" : "center" }); $('.datagrid-header-row td').unbind('contextmenu')//取消表头右键功能 $(this).datagrid('clearSelections');//取消所有的已选择项 $(this).datag