AngularJs内置指令大全

     AngularJs GitHub: https://github.com/angular/angular.js/

    AngularJs下载地址：https://angularjs.org/

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就只是设置值而已  不双向绑定数据