angularjs自定义指令及过滤器介绍

发表于 | 分类于

操作DOM的方式（代码的执行顺序run -> 控制器 -> 自定义指令）

语法：模块对象.directive(‘指令名称’,[function(){ return{}}])
备注：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
return {
	// angularjs提供给我们的写DOM操作的地方
	link:function(scope,element,attributes){
		// 注意传入的参数的顺序，必须是scope,element,attributes
		// element 指令所在的元素 jqLite对象
		//scope 指令所在作用域中的$scope
		//attributes 指令所在的元素身上的属性集合
	element.css('background','red')}
	template:<div>333333</div>,
	templateUrl:'./tpl/tpl-1.html' //必须在服务器中打开
	transclude:true  
		//告诉angularjs保留指令所在元素内部的原有内容：template:'<div><span ng-transclude></span>333333 </div>'
	replace:true 
		//在HTML页面中 指令所在的元素不想要了， 我只要保留指令内部定义的模板内容
注意:
	-> 1.当我们把指令所在的元素删除之后 指令的模板必须有一个根元素 
	-> 2.link函数对应的element参数 会变成 指令模板中的根元素
	-> 3.使用replace的时候，"template:<div>333333</div><span></span>"会报错，是因为当删除该元素的标签后，在template的内容中，span和div标签是平级的，因此无法判断出谁作为根元素。
 restrict:ECMA
 + 属性指令 A attributes
 + 元素指令 E element
 + 类名指令 C class
 + 注释指令 M comment   注释指令需要配合replace一起使用
**scope**:true 指令本身拥有自己的作用域 但是会继承父级作用域
scope:false 指令本身没有自己的作用域 使用的是当前指令所在作用域的 $scope
scope:{} 指令本身拥有自己的作用域 不会继承父级的作用域
**@ 取当前指令所在元素身上的同名属性对应的值 并且将 值 赋值给当前属性**
**= 取当前指令所在元素身上的同名属性对应的值 并且将 值 赋值给当前属性**
区别：
1. @ 需要加大括号通过@取到的数据都是字符串
2. = 不需要大括号通过=取到的数据 是 真实的数据类型
+ ng-repeat-after  可以理解为循环遍历完成后，自定义的指令。
建立指令的四种形式。注意注释标签的填写形式。
注意：在定义块级作用域的时候，获取外部控制器的数据的时候，方式，通过双大括号获取的全部是字符串，通过""获取的是数据的本身。
### 过滤器
**{ 数据 | 过滤器的名字:参数1:参数2 }**
**currency** 货币过滤器
**date** 日期过滤器
**filter**过滤器 根据过滤条件 过滤出符合条件的数据（注意：模糊匹配：filter过滤器会去数据中的[每一条数据中的每一个字段中]去查找 有没有 [包含]过滤条件的数据 如果有 留下，精确匹配：filter过滤器会去数据中的[指定的字段中]去查找 有没有 [包含]过滤条件的数据 如果有 留下）
**limitTo** 限制过滤器
**orderBy** 可以根据某一个字段进行排序 默认 是升序（例如：orderBy:'age' 根据age字段进行升序排列
 -> orderBy:'-age' 根据age字段进行降序排列
**json**过滤器 可以将数据以良好的格式 展现到页面中
#### 自定义过滤器
``` js
	模块对象.filter('名字',[function(){
		return function(value){	
				// value 就是我们需要处理的数据
			    // 最后 我们需要将处理的数据return出去
		}
  }])