04-指令

发表于 | 分类于 | 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
## 事件指令
- ng-click/dblclick
- ng-mousedown/up
- ng-mouseenter/leave
- ng-mousemove/over/out
- ng-mousemove/over/out
- ng-mousemove/over/out
- ng-mousemove/over/out
- ng-selected
- ng-change
- ng-copy
- ng-cut
- ng-cut

## angularJs的指令

- ng-disabled
    - 服务 $interval
- ng-readonly
- ng-checked
- ng-value

## 指令·显示优化
- ng-bind


1
对比:


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

- ng-bind-template
- ng-bind-html
    -需要引入 angular-sanitize.min.js 模块 
- ng-cloak : 通过css样式显示优化
- ng-non-bindable : 要显示{{}}

## 指令·原生扩展
> ng-attr-xx="{{值}}" 记得加{{}}
- ng-class
- ng-style
- ng-href
- ng-src
- ng-attr-xx

## 指令·显示隐藏
- ng-show
- ng-hide
- ng-if
- ng-switch
    - on
    - ng-switch-default
    - ng-switch-when
- ng-open

## 指令
- ng-init

$scope.arr=[[1,2],[3,4]]




  • -



1
2
3
4
5
6
7
8
9
10
11
12
13
14
- ng-include
- ng-include
    - ng-model-options
        -  updateOn
 
- ng-controller
    - as
    
## 标签指令

- a
- <select>
    - ng-options
        - for in


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

## 表单验证

- $valid
- $invalid
- $pristine
- $dirty
- $error
> name的方式进行查找 要写ng-model

- required 
- ng-minlength
- ng-maxlength
- ng-pattern

**class**
- .ng-valid{} 
- .ng-invalid{} 
- .ng-pristine{} 
- .ng-dirty{}

## 自定义指令

- angular.module
    - controller
    - run
    - filter
    - directive
        - restrict的四种定义方式:E A C M 区分大小写,可以自由组合
        - template
        - templateUrl // 需要在服务器环境,而且是相对与主html文件位置,而不是基于引入的js文件
        - replace
        - scope:{
			id:'@',
			data:'=',
            fn:'&'
		},
        - link: function (scope, iElement, iAttrs) {...}
        - transclude:分发
        - controller:{this.name=xxx}
        - require: ^ ?