Angular常用标记

（如果没有特别指明，则所有的HTML元素都支持该标记）

（如果没有特别指明，则 AngularJS 指令不会覆盖原生js的指令）

1、数据绑定类：

　　1、插值语法：{{}}

　　2、标签内容绑定：ng-bind

　　　　定义：使用给定的变量/表达式的值来替换 HTML 元素的内容

　　3、表单控件双向绑定：ng-model

　　　　定义：绑定 HTML 表单元素到 scope 变量中，如果 scope 中不存在变量，将会创建它

　　　　使用范围：支持该指令的元素：<input> <select> <textarea>.....支持用户输入的表单标签

2、事件（动作）绑定类：

　　1、点击事件：ng-click //绑定的是事件调用，对比原生 js 的点击事件

　　　　<button　ng-click = "toggle()">点击</button>

　　2、双击事件：ng-dblclick

　　3、获得焦点事件：ng-focus

　　4、失去焦点事件：ng-blur

　　5、数据改变事件：ng-change　

　　　　需要搭配 ng-model 指令使用

该指令不会覆盖原生事件，当原生onchange事件触发，ng-change表达式与原生的onchange事件都会执行

该事件在每次改变时触发，不需要等待一个完成的修改过程或者等待失去焦点的动作

该事件只针对输入框值的真实修改，而不是通过 JavaScript 来修改

使用范围：<input><select><textarea>支持

3、加载预处理类　　　　

　　1、ng-cloak：

页面加载时防止页面闪烁（其实也就是防止在 angularjs 还没有加载完成的时候 {{}} 内容以字符串的形式显示）

　　　　解决ng-cloak不起作用的问题，在头部引入一下css:

原理其实就是对 ng-cloak 的相关元素设置了 display:none!important; 隐藏相关内容，这样在页面还没准备好的时候就不显示，当 angular 指令开始解析的时候就把 ng-cloak 这个属性去除掉，这样元素就又现显示出来了。可是当我们的 angular.js 在页面最后加载的时候，就不能使 ng-cloak 达到预期的效果，因为 angular 还没加载的时候，页面内容就已经显示出来了。为了不违背 css 在前 js 在后的原则，而又让 ng-cloak 发挥作用，这时候就需要在页面最前面加上以下 css 样式，手动让其隐藏。

@charset "UTF-8";
[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{
　　display:none !important;}
　　ng\:form{display:block;
}
.ng-animate-start{
　　clip:rect(0,auto,auto,0);
　　-ms-zoom:1.0001;}
.ng-animate-active{
　　clip:rect(-1px,auto,auto,0);
　　-ms-zoom:;
}

　　2、ng-src：

为 img 指定图片地址，需要使用 ng-src 替代 src

是否覆盖原生的<img>：是

使用范围：<img>

注意：在 AngularJS 代码执行前不显示图片

3、ng-href：

添加链接地址

是否覆盖原生的<a>：是

使用范围：<a>

如果在 href 的值中有 AngularJS 代码，则需要使用 ng-href 替代 href

属性值可以包含{{}}任意字符串

4、状态设置类：

　　1、ng-class

　　　　方式1:$scope.classOptions={

　　　　　　类名1:false,

　　　　　　类名2：true

　　　　　}

　　　方式2:$scope.classOptions={

　　　　　　　　类名1:$even,

　　　　　　　　　类名2:$middle,

　　　　　　　　　类名3:$odd

　　　　　　　}

　　偶数行显示类名1 样式，中间行显示类名2 样式，奇数行显示类名3 样式

　　2、ng-style绑定样式：

　　　　ng-style={

　　backgroundColor="yellow"

　　}

　　3、