angularjs ng-bind-html的用法总结
angular中的$sanitize服务.
此服务依赖于ngSanitize模块.(这个模块需要加载angular-sanitize.js插件)
要学习这个服务,先要了解另一个指令: ng-bing-html.
顾名思义,ng-bind-html和ng-bind的区别就是,ng-bind把值作为字符串,和元素的内容进行绑定,但是ng-bind-html把值作为html,和元素的html进行绑定.相当于jq里面的.text()和.html().
但是,出于安全考虑,如果我们直接使用ng-bind-html是会报错的,ng-bind-html后面的内容必须经过一定的处理.
处理的方式有两种,一种是使用$sce服务,另一种就是使用$sanitize服务.$sce服务怎么用,在以后的文章中会独立讲解,这篇主要讲解$sanitize服务.
$sanitize会根绝一个白名单来净化html标签.这样,不安全的内容就不会被返回. 白名单是根据$compileProvider的aHrefSanitizationWhitelist和imgSrcSanitizationWhitelist函数得到的.
比如
var app =angular.module(‘myApp‘,[‘ngSanitize‘]);
app.controller(‘ctrl‘,function($scope,$sce){
$scope.myHtml = ‘<p style="color:blue">an html\n‘ +
‘<em onclick="this.textContent=\‘code_bunny\‘">click here</em>\n‘ +
‘snippet</p>‘;
$scope.trustHtml = $sce.trustAsHtml($scope.myHtml)
});
angularjs ng-bind-html的用法总结的更多相关文章
- MyBatis从入门到精通(第4章):MyBatis动态SQL【foreach、bind、OGNL用法】
(第4章):MyBatis动态SQL[foreach.bind.OGNL用法] 4.4 foreach 用法 SQL 语句中有时会使用 IN 关键字,例如 id in (1,2,3).可以使用 ${i ...
- js中.bind()和.call()用法讲解
var option = { ti : 8, it(){ return this.ti; } } 这里又一个option对象,it()方法里的this指的就是option对象的上下文. console ...
- 一个简单的例子让你很轻松地明白JavaScript中apply、call、bind三者的用法及区别
JavaScript中apply.call.bind三者的用法及区别 引言 正文 一.apply.call.bind的共同用法 二. apply 三. call 四. bind 五.其他应用场景 六. ...
- AngularJs angular.bind、angular.bootstrap、angular.copy
angular.bind 返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能. 格式:angular.bind(se ...
- 夺命雷公狗—angularjs—22—bind改指向和传参方式
在angularjs中的传参的jquery的方式是极度相似的噢,而且还可以通过bind来改变指向 <!DOCTYPE html> <html lang="en" ...
- 详解AngularJS中的filter过滤器用法
系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这 ...
- apply、call、bind区别、用法
apply和call都是为了改变某个函数运行时的上下文而存在的(就是为了改变函数内部this的指向): 如果使用apply或call方法,那么this指向他们的第一个参数,apply的第二个参数是 ...
- MyBatis bind标签的用法
From<MyBatis从入门到精通> <!-- 4.5 bind用法 bind标签可以使用OGNL表达式创建一个变量并将其绑定到上下文中. 需求: concat函数连接字符串,在M ...
- js中call,apply,bind方法的用法
call .apply.和bind 以上这三个方法都是js function函数当中自带的方法,用来改变当前函数this的指向. call()方法 语法格式: fun.call(thisArg[,ar ...
- C++11 bind和function用法
function是一个template,定义于头文件functional中.通过function<int(int, int)> 声明一个function类型,它是“接受两个int参数.返回 ...
随机推荐
- Selenium分布式自动化测试平台 Standalone Server 4.0 搭建
最新的selenium测试平台大概有这么几个组件 Selenium Standalone Server: 用来搭建远程测试平台以及分布式测试. Selenium WebDriver: 最基础的用来创建 ...
- Mac 下安装nvm 后vscode 输入node -v 不起作用
今天下午,我因为要安装不同的node版本,所有安装了nvm下载了两个不同版本的node,并且配置了环境变量. 在命令行窗口中使用起来没有任何问题,但是在vs code中敲的时候node -v 显示no ...
- jquery中的 deferred之 when (三)
先来看使用案例: var def1 = $.Deferred(); var def2 = $.Deferred(); var def3 = $.Deferred(); var def4 = $.Def ...
- Day01 -Class类别 精选面试题
30天修炼完成Ruby精选面试题! 我决定从学习Ruby on Rails开始着手!鼓励自己在短期间内专心学习与产出知识,为转职奠定良好的基础. A.首先:找寻方向,决定主题 我想很多人的状况都跟我一 ...
- 第一周pta作业2
7-2 求最大值及其下标 (20 分) 本题要求编写程序,找出给定的n个数中的最大值及其对应的最小下标(下标从0开始). 输入格式: 输入在第一行中给出一个正整数n(1<n≤10).第二行输入n ...
- soa 和微服务的区别
soa beased applications are compromised of more loosely coupled componets that use an enterprise ser ...
- jQuery-UI的使用
使用效果图: 源码: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- 通过微信公众号API复制公众号自定义菜单同时增加子菜单方法
主要的原因是再不破坏公众号以前的菜单的基础上增加自定义菜单,主要步骤如下: 1.通过微信提供的微信公众平台接口调试工具获取公众号的所有自定义菜单 网址:https://mp.weixin.qq.com ...
- 定义返回结果 Resultmodel
web: checkPath: localhost:9099 success: 1 error: 0 package com.worker.config; import org.springframe ...
- string转可空类型
string类型转可空类型 string.IsNullOrEmpty(str) ? (int?)null : int.Parse(str) 此处要注意将null转为可空的类型才可以,不然会报错