angualrjs 总结 随记(三)
$sanitize和$sce服务的使用方法
$sanitize会把标签的属性都移除,以及绑定在元素上的事件.仅保留了标签和内容
$q服务的使用
1. 创建一个Service,去服务器读取数据:
2. 在Controller上(以同步方式)使用这个Service:
angular多个控制器如何共享数据
多个控制器之间共享数据,通常两种方式:
第一种是在控制器里通过$scope.$$prevSibling或$scope.$$nextSibling获得另一个控制器的作用域对象。(这种共享数据的方法不推荐,应该使用服务来共享数据)
第二种是通过服务的方式,也是推荐的方式,不过值得注意的是,这两种方式的原理都是 利用对象的赋值是通过指针引用的
在模块中定义服务
angular的$http配置属性
$http请求的配置对象
$http()接受的配置对象可以包含以下属性:
method: http请求方式,可以为GET,DELETE,HEAD,JSONP,POST,PUT
url: 字符串,请求的目标
params: 字符串或者对象,会被转换成为查询字符串追加的url后面
data: 在发送post请求时使用,作为消息体发送到服务器
headers: 一个列表,每个元素都是一个函数,返回http头
xsrfHeaderName(字符串):保存XSFR令牌的http头的名称
xsrfCookieName: 保存XSFR令牌的cookie名称
transformRequest: 函数或者函数数组,用来对http请求的请求体和头信息进行转换,并返回转换后的结果。
transformResponse: 函数或者函数数组,用来对http响应的响应体和头信息进行转换,并返回转换后的结果。
cache: 布尔类型或者缓存对象,设置之后angular会缓存get请求。
timeout:数值,延迟请求
responseType:字符串,响应类型。可以为arraybuffer, blob,document,json, text, moz-blob, moz-chunked-text, moz-chunked-arraybuffer
$http请求的响应对象
angular传递给then方法的响应对象包括以下几个属性
data: 转换之后的响应体
status: http响应状态码
headers: 头信息
config: 生成原始请求的设置对象
statusText: http响应状态的文本
封装第三方jquery插件
自己编写 directive 的情况通常是当你使用了第三方的 jQuery 插件,因为插件在 AngularJS 之外对表单值进行更改,并不能即时反应到 Model 中。
例如,我们用得比较多的 jQueryUI datepicker 插件,当你选中一个日期后,插件会将日期字符串填到 input 输入框中。View 改变了,却并没有更新 Model,因为$('.datepicker').datepicker(); 这段代码不属于 AngularJS 的管理范围。
我们需要编写一个directive 来让 DOM 的改变即时更新到 Model 里。
然后在 HTML 中引入这个 directive
<input type="text" datepicker ng-model="myObject.myDateValue" />
AngularJS操作DOM - angular.element
addClass()-为每个匹配的元素添加指定的样式类名
after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点
append()-在每个匹配元素里面的末尾处插入参数内容
attr() - 获取匹配的元素集合中的第一个元素的属性的值
bind() - 为一个元素绑定一个事件处理程序
children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选
clone()-创建一个匹配的元素集合的深度拷贝副本
contents()-获得匹配元素集合中每个元素的子元素,包括文字和注释节点
css() - 获取匹配元素集合中的第一个元素的样式属性的值
data()-在匹配元素上存储任意相关数据
detach()-从DOM中去掉所有匹配的元素
empty()-从DOM中移除集合中匹配元素的所有子节点
eq()-减少匹配元素的集合为指定的索引的哪一个元素
find() - 通过一个选择器,jQuery对象,或元素过滤,得到当前匹配的元素集合中每个元素的后代
hasClass()-确定任何一个匹配元素是否有被分配给定的(样式)类
html()-获取集合中第一个匹配元素的HTML内容
next() - 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器,那么只有紧跟着的兄弟元素满足选择器时,才会返回此元素
on() - 在选定的元素上绑定一个或多个事件处理函数
off() - 移除一个事件处理函数
one() - 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次
parent() - 取得匹配元素集合中,每个元素的父元素,可以提供一个可选的选择器
prepend()-将参数内容插入到每个匹配元素的前面(元素内部)
prop()-获取匹配的元素集中第一个元素的属性(property)值
ready()-当DOM准备就绪时,指定一个函数来执行
remove()-将匹配元素集合从DOM中删除。(同时移除元素上的事件及 jQuery 数据。)
removeAttr()-为匹配的元素集合中的每个元素中移除一个属性(attribute)
removeClass()-移除集合中每个匹配元素上一个,多个或全部样式
removeData()-在元素上移除绑定的数据
replaceWith()-用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
text()-得到匹配元素集合中每个元素的合并文本,包括他们的后代
toggleClass()-在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类
triggerHandler() -为一个事件执行附加到元素的所有处理程序
unbind() - 从元素上删除一个以前附加事件处理程序
val()-获取匹配的元素集合中第一个元素的当前值
wrap()-在每个匹配的元素外层包上一个html元素