详解Angular.js数据绑定时自动转义html标签及内容

angularJS在进行数据绑定时默认是以字符串的形式数据，也就是对你数据中的html标签不进行转义照单全收，这样提高了安全性，防止html标签的注入攻击，但有时候需要，特别是从数据库读取带格式的文本时，无法正常的显示在页面中。

而要对html进行转义，则需要在数据绑定的html标签中使用ng-bind-html属性，该属性依赖与$sanitize，也就是需要引入angular-sanitize.js文件，并在module定义时注入该服务ngSanitize。比如：

html:

<span ng-controller = "myCtr" ng-bind-html = "htmlStr"></span>

javascript:

function myCtr($scope){

　　$scope.htmlStr = '<p style="color:white;background:#f60;"></p>';

};

这样可以实现html转义，但是有个问题是style这种标签会被angularJS认为是不安全的所以统统自动过滤掉，而为了保留这些就需要开启非安全模式。

如何让自动加载的数据转义html标签呢？实际上还有一种绑定方式：

html：

<div ng-repeat = "article in articles">

　　<div class="panel-heading">

　　　　<h4><b>{{article.title}}</b></h4>

　　</div>

　　<div class="panel-body">

　　　　<article id="word-display" ng-bind-html="article.content | trustHtml">

　　　　</article>

　　</div>

</div>

javascript:

success(function(data){

　　$scope.articles = data;

});

myApp.filter('trustHtml',function($sce){

　　return function(input){

　　　　return $sce.trustAsHtml(input);

　　}

});

其中$sce是angularJS自带的安全处理模块，$sce.trustAsHtml(input)方法便是将数据内容以html的形式进行解析并返回。将此过滤器添加到ng-bind-html所绑定的数据中，便实现了在数据加载时对与html标签的自动转义。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS动态绑定HTML的方法分析

    本文实例讲述了AngularJS动态绑定HTML的方法.分享给大家供大家参考,具体如下: 在Web前端开发中,我们经常会遇见需要动态的将一些来自后端或者是动态拼接的HTML字符串绑定到页面DOM显示,特别是在内容管理系统(CMS:是Content Management System的缩写),这样的需求,更是遍地皆是. 对于对angular的读者肯定首先会想到ngBindHtml,对,angular为我们提供了这个指令来动态绑定HTML,它会将计算出来的表达式结果用innerHTML绑定到DOM.

  • Angular4绑定html内容出现警告的处理方法

    前言 众所周知在Web前端开发中,我们经常会遇见需要动态的将一些来自后端或者是动态拼接的HTML字符串绑定到页面DOM显示,特别是在内容管理系统(CMS:是Content Management System的缩写),这样的需求,更是遍地皆是.但是最近在Angular4绑定html内容的时候出现了警告,通过查找相关资料终于解决了,下面给同样遇到这个问题的朋友们分享下,话不多说了,来一起看看详细的介绍吧. 绑定html内容 如果用正常的方法去绑定的话,可能会出再这种警告 <div [innerHTM

  • 详解Angular.js数据绑定时自动转义html标签及内容

    angularJS在进行数据绑定时默认是以字符串的形式数据,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止html标签的注入攻击,但有时候需要,特别是从数据库读取带格式的文本时,无法正常的显示在页面中. 而要对html进行转义,则需要在数据绑定的html标签中使用ng-bind-html属性,该属性依赖与$sanitize,也就是需要引入angular-sanitize.js文件,并在module定义时注入该服务ngSanitize.比如: html: <span ng

  • 详解angular用$sce服务来过滤HTML标签

    angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签.对于angular 1.2一下的版本我们必须要使用$sce这个服务来解决我们的问题.它可以通过使用$sce.trustAsHtml().该方法将值转换为特权所接受并能安全地使用"ng-bind-html". controller('HealthEducationDe

  • 详解Angular.js中$http拦截器的介绍及使用

    详解Angular.js中$http拦截器的介绍及使用

    前言 $http service在Angular中用于简化与后台的交互过程,其本质上使用XMLHttpRequest或JSONP进行与后台的数据交互.在与后台的交互过程中,可能会对每条请求发送到Server之前进行预处理(如加入token),或者是在Server返回数据到达客户端还未被处理之前进行预处理(如将非JSON格式数据进行转换):当然还有可能对在请求和响应过程过发生的问题进行捕获处理.所有这些需求在开发中都非常常见,所以Angular为我们提供了$http拦截器,用来实现上述需求. 什么

  • 详解Angular.js的$q.defer()服务异步处理

    首先本文以个人目前项目的部分代码为例说明为什么要用deferred. function getBase64(img){//传入图片路径,返回base64 function getBase64Image(img,width,height) { var canvas = document.createElement("canvas"); canvas.width = width ? width : img.width; canvas.height = height ? height : i

  • 详解Angular.js指令中scope类型的几种特殊情况

    前言 大家都知道在默认情况下,指令应该访问父作用域.如果我们对指令暴露了父控制器的scope,那么指令就可以自由的修改scope属性.在一些情况下,你的指令可能想要添加一些只有内部可以使用的属性和函数,如果我们都在父作用域中完成,可能会污染了父作用域,因此,我们有以下两种选择: 使用父作用域-如果不需要操作父作用域属性,不需要一个新的作用域,可以直接使用父作用域 scope:false 一个子作用域-这个作用域会原型继承父作用域 scope:true 一个隔离的作用域-一个全新的.不继承.独立存

  • 详解Node.js中间件是怎样工作的

    详解Node.js中间件是怎样工作的

    目录 什么是 Express 中间件? 编写 Express 中间件的要求 Express中间件:基础 中间件解决什么问题?为什么要用它? 中间件函数是什么样的? 中间件链 Express中间件的类型 内置中间件 错误处理中间件 第三方级别的中间件 总结 什么是 Express 中间件? 中间件在字面上的意思是你在软件的一层和另一层中间放置的任何东西. Express 中间件是在对 Express 服务器请求的生命周期内所执行的函数. 每个中间件都可以访问其被附加到的所有路由的 HTTP 请求和

  • 详解MySQL与Spring的自动提交(autocommit)

    1 MySQL的autocommit设置 MySQL默认是开启自动提交的,即每一条DML(增删改)语句都会被作为一个单独的事务进行隐式提交.如果修改为关闭状态,则执行DML语句之后要手动提交 才能生效. 查询当前会话的自动提交是否开启: mysql> show variables like 'autocommit'; +---------------+-------+ | Variable_name | Value | +---------------+-------+ | autocommit

  • 详解Vue.js 可拖放文本框组件的使用

    详解Vue.js 可拖放文本框组件的使用

    可拖放文本框允许用户通过拖动备选项至文本框来确定输入,其实也可以说是 combobox 的一种变形. 与 combobox 相比,这种组件能让用户更加直观的看到所有备选项,并且可以是多个输入共用一组备选项. 类似的组件也曾用在 3D Windrose App,Graph Maker App 等多个 app 里. 注册组件 注册可拖放文本框组件(其实就是将封装好的这部分代码 Ctrl+C and Ctrl+V). <script type="text/x-template" id=

  • 详解Angular结构型指令模块和样式

    详解Angular结构型指令模块和样式

    一,结构型指令 *是一个语法糖,<a *ngIf="user.login">退出</a>相当于 <ng-template [ngIf]="user.login"> <a>退出</a> </ng-template> 避免了写ng-template. <ng-template [ngIf]="item.reminder"> <mat-icon > alar

  • 详解Angular项目中共享模块的实现

    目录 一.共享CommonModule 二.共享MaterialModule 三.共享ConfirmDialog 一.共享CommonModule 创建share Modele:ng g m share import进来所有需要共享的模块都export出去, 暂时只有CommonModule,以后会有一些需要共享的组件. import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'

随机推荐