1、ng-model
这个大家都非常熟悉了,就是将表单控件和当前作用域的属性进行绑定。需要注意绑定的scope
的范围(父scope
与子scope
)。
ng-model
主要绑定的元素包括input
, select
, textarea
ng-model
的元素都有ng-valid
(可用),ng-invalid
不可用
ng-pristine
(用户为对这个元素进行操作过), ng-dirty
(元素的模型发生改变的话)属性; 这几个属性都是布尔值;
2、ng-init
用得比较少,该指令被调用时会初始化内部作用域。一般不建议使用此参数。
3、ng-app
- 这个是必需的。使用该指令自动启动一个AngularJS应用。
- ngapp指令指定的应用程序的根元素,通常放置在网页的根元素如body或html 标签。
- 只有一个AngularJS应用可以自动引导每个HTML文档。
- 第一ngapp找到该文件将定义自动引导的根元素的应用。
- 运行多个应用程序在一个HTML文件,您必须手动引导他们使用angular.bootstrap。
- AngularJS应用不能互相嵌套。
- 你可以指定一个AngularJS模块被用于应用程序的根模块。
- 该模块将被加载到应用程序时,引导到$injector对象中。
- 它应该包含所需的应用程序代码,或依赖于将包含代码的其他模块的依赖关系。
- 更多信息见angular.module。
4、ng-controller
这个也是经常用到的,用来定义一个控制器。注意格式
5、ng-form用来定义一个from,通常是用来验证参数。通常可以和以下标签一起使用
ng-valid (有效的).
ng-invalid (无效的).
ng-pristine (原始,简介).
ng-dirty(脏的).
ng-submitted (提交的)
6、ng-disabled
像这种只要出现则生效的属性,我们可以在AngularJS
中通过表达式返回值true/false
令其生效。禁用表单输入字段。
7、ng-readonly
通过表达式返回值true/false
将表单输入字段设为只读。
8、ng-checked
设置是否选中复选框。其中 ng-true-value="''"
ng-false-value="''"
,可用来设置选中时或不选中时对应的值
9、ng-selected
给<select>
里面的<option>
用的
10、ng-show/ng-hide
根据表达式显示/隐藏HTML元素,注意是隐藏,不是从DOM移除(ng-if才是移除),对于大对象的DOM,可以用它,但如果是小对象的DOM,建议使用ng-if
11、ng-change
不是HTML那套onXXX
之类的,而是ng-XXX
。用来设置input/select
等内容发生变化时的事件
12、{{}}
其实这个也是一个指令,也许觉得和ng-bind
差不多,但页面渲染略慢时可能会被看到。另外,{{}}
的performance
远不如ng-bind
,只是用起来很方便。
13、ng-bind
ng-bind
的行为和{{}}
差不多,只是我们可以用这个指令来避免FOUC(Flash Of Unrendered Content)
,也就是未渲染导致的闪烁。
ng-bind-template
指令,这个指令跟ng-bind 差不多
ng-bind
是指替换元素的textContent
为ng-bind
的值
ng-bind-template
是指替换元素的textContent
的值为ng-bind-template
经过angular.parse().assign
的内容;
14、ng-cloak
ng-cloak
也可以为我们解决FOUC
。ng-cloak
会将内部元素隐藏,直到路由调用对应的页面。
FOUC :文档样式短暂失效
如果使用import
方法对CSS
进行导入,会导致某些页面在Windows
下的Internet Explorer
出现一些奇怪的现象:
以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content
)存在完全是为了用户体验, 如果一个html
界面angular.js
还没加载进来,那么界面会有{{}}
这样的标志,如果{{}}
标志多了,用户会一脸蒙蔽 啊, ng-cloak
如果加在根节点,那么界面的{{}}
会被隐藏,等到{{}}
完全编译成动态数据的时候界面才可见;
15、ng-if
如果ng-if
中的表达式为false
,则对应的元素整个会从DOM
中移除而非隐藏,但审查元素时你可以看到表达式变成注释了。如果相进行隐藏,可以使用ng-hide
。
16、ng-switch
ngSwitch
指令包含ng-switch on、ng-switch-when、ng-switch-default
功能类似switch,ng-switch on指要判断的值,ng-switch-when指条件条件符
合将显示这个dom元素, ng-switch-default指条件都不符合默认显示的元素。
17、ng-repeat
遍历集合(数组),给每个元素生成模板实例,每个实例的作用域中可以用一些特殊属性,如下
<ul ng-repeat="user in data"><ul>
$index : 表示当前item的索引,
$first : 如果item为第一个,那么$first为true ,
$middle : 如果item不是开头,不是结尾$middle为true,
$last : 如果item是最后一个, $last为true,
$even : 如果索引为偶数, 那么$even为true,否则为false
$odd : 同上, 索引为奇数$odd为true....;
18、ng-href
起初我在一个文本域中弄了个ng-model
,然后像这样<a href="{{myUrl}}">
在href
里面写了进去。
19、ng-src
大同小异,即表达式生效前不要加载该资源。
界面加载的时候才不管img的标签src有什么
都会一并加载
如果图片的src包含了{{****}}
这些字符
浏览器不会管这是什么东西
在渲染dom
树的时候
会直接请求这个地址
如果想通过{{****}}
动态生成img
标签的src
,不要用src
,要用ng-src
20、ng-class
用作用域中的对象动态改变类样式, 通过一个表达式 来判断什么情况下 用什么样式
21、ng-click
点击事件
ng-click=event()
$scope.event=function(){}
22、ngKeyup
键盘事件
23、ngKeydown
键盘事件
24、ngKeypress
键盘事件
25、ngMousedown、ngMouseenter、ngMouseleave、ngMousemove、ngMouseover、ngMouseup
鼠标事件
26、ngTrim
去除左右空格
27、ngInclude
ng-include
指令是指这个指令标签的innerHTML
为指定的url
这个url为相对与当前目录的url
地址或者绝对地址
angular
会通过ajax
请求该地址
然后把地址的内容作为指令元素innerHTML
填充;
28、ngIist
ng-list
这个指令要和ng-model
合起来用
ng-list
在输入框的表现通过split(",")
的数组才是实际的model
ng-list
默认为”,”逗号
要设置成自定义的区分符,直接为ng-list
赋值即可;
29、ngPattren
匹配这个输入框的输入值是否符合这个正则,如果不匹配,这个元素会被加上ng-invalid
的class
, 如果匹配会被加上ng-valid
的class
30、ng-paste ng-copy ng-cut
他们是一伙的,如果输入框的值是粘帖的,那么ng-paste
就为真, ng-copy
,ng-cut
也是同理
31、ng-non-bindable
ng-non-bindable
指令指该元素的内部{{****}}
不被绑定和转义,不受angular
的掌控:
32、ng-open
这个我也认为和ng-open
, ng-hide
差不多, 区别是ng-open
只能绑定details
元素,(details
标签目前只有webkit
浏览器支持)
当ng-open
的值为open
那么绑定的details
内部的summary
元素就显示
33、input里的一些属性
ngMinLength,,ngMaxLength,ng-parttern
,通过正则判断input
是否匹配,ngChange
,ng-vlaue
就只是设置值而已 不双向绑定数据