angularjs表达式中的HTML内容,如何不转义,直接表现为html元素
2016-03-18 16:54
381 查看
默认情况下,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中报刊需要依赖的模块,如下:
3.<p ng-bind-html=”msg”></p>;
方法二:
1. 导入angular-sanitize.js
2. 将其作为一个过滤器:
3.<p ng-bind-html=”msg | to_trusted”></p>;
$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 指令
- AngularJS简介
- [Angular 2] WebStorm - Managing Imports
- 【angularJS】过滤器
- AngularJS表达式
- Angular学习笔记
- AngularJS介绍
- angular页面
- AngularJS实现一个简单的Carousel
- angularJS过滤器date所接受的日期类型
- angular directive的compile和link
- angular入门学习之五
- angular入门学习之四
- [Angular2] Template Syntax(模板语法)-(2) 企
- AngularJS+ASP.NET MVC+SignalR实现消息推送
- Angularjs中date日期格式化细节问题
- 深入angular.js依赖注入
- angularJS跳转返回刷新
- angularjs自定义指令的样式如何设置
- Angular ng-include 学习实例