angularjs 指令基础随笔
1:ng-app
该指令自动启动一个AngularJS应用,通常放置在网页的根元素如body或html 标签上。在使用之前必须引入jq和angularjs文件。


声明完了ng-app 在js中首先创建模块,然后才能创建控制器,使用控制器文件。如:图2。
2:ng-bind
设置ngbind属性,angular会将ngbind的值替换掉标签的内容,并更新文本内容的值.
通常情况下,不使用ngbind属性,而是使用双花括号标记{ { } }。
如果网速比较慢浏览加载angularjs之前会显示原始形态时,最好用ngbind来代替,因为ngbind是元素的属性,加载的时候看不到。

这是把ng-bind当成了属性用。
还可以当成类用:例如:

3:ng-bind-html
将自定义的html插入到指定的地方。
4:ng-bind-template
告诉 AngularJS 将给定表达式的值替换 HTML 元素的内容。当你想在 HTML 元素上绑定多个表达式时可以使用ng-bind-template指令。

5:ng-blur

6:ng-change
值改变时触发事件,这个事件是值改变就立即触发和JavaScript中的onchange的触发方式(在用户离开表单元素或按回车键时)不同.ngChange事件只在基于model的值改变时才触发。

7:ng-checked
用于设置单元框或者复选框的checked 属性。
如果ng-checked属性返回 true,复选框(checkbox)或单选按钮(radio)将会被选中。

8:ng-class
ng-class指令用于给 HTML 元素动态绑定一个或多个 CSS 类。
a:第一种:通过双向数据绑定来改变

b:第二种:通过字符串数组的形式来改变

c:第三种:通过key/value的方式来改变

9:ng-class-odd/ng-class-even
与ng-class类似。但是作用只在奇数(偶数)行。 这个指令只能应用在一个ngrepeat范围。

10:ng-click

11:ng-clock
ng-cloak指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加载完而出现显示 AngularJS 代码,进而会有闪烁的效果,ng-cloak指令是为了防止该问题的发生。

12:ng-controller
控制器:ngController指定一个Controller类,这个类控制业务逻辑和模型的在视图的绑定。

13:ng-copy
在文本被拷贝的时候执行。

14:ng-csp

ng-csp指令用于修改 AngularJS 的安全策略。
如果使用了ng-csp指令, AngularJS 将不会执行eval 函数,这样就无法注入内联样式。
设置ng-csp指令为no-unsafe-eval, 将阻止 AngularJS 执行 eval 函数,但允许注入内联样式。
设置ng-csp指令为no-inline-style, 将阻止 AngularJS 注入内联样式,但允许 执行 eval 函数。
如果开发 Google Chrome 扩展或 Windows 应用ng-csp指令是必须的。
注意:ng-csp指令不会影响 JavaScript,但会修改 AngularJS 的工作方式,这就意味着: 你仍然可以编写 eval 函数, 且也可以正常执行, 但是 AngularJS 不能执行它自己的 eval 函数。如果采用兼容模式,会降低 30% 的性能。
15:ng-cut
在文本被剪切的时候触发。

16:ng-dblclick
在双击的时候触发。

17:ng-disabled
ng-disabled指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。
如果ng-disabled中的表达式返回 true 则表单字段将被禁用。

18:ng-focus
获取焦点事件

19:ng-form
两种写法 <form name="myForm"></form> <ng-form name="myForm"></ng-form>
