使用绑定和模板指令

一、数据绑定指令

ng-bind 绑定一个HTML元素的innerText属性，属于单向数据绑定，从数据模型中获得值并插入到HTML元素中。

ng-bind-html 使用一个HTML元素的innerHTML属性创建数据绑定。这是有潜在风险的，因为这意味着浏览器将把内容解释为HTML，而不只是内容。

ng-bind-template 与ng-bind指令类似，但是ng-bind只能处理单个数据绑定表达式，ng-bind-template允许在属性值中指定多个模板表达式

<div ng-bind-template="First:{{action}}. Second:{{complete}}"></div>

ng-model 创建一个双向数据绑定，从两个方向同时跟踪变化，允许元素从用户处收集数据以修改程序的状态。仅能用户那些允许用户输入数据值的元素上。

ng-non-bindable 声明一块不会执行数据绑定的区域

二、模板绑定指令

ng-cloak 使用一个CSS样式隐藏内联绑定表达式

ng-include 向DOM中加载、处理和插入一段HTML

ng-repeat 对数组中或对象某个属性中的每个对象生成一个元素及其内容的若干新拷贝

ng-repeat-start 表示含有多个顶层元素的重复区域的开始部分

ng-repeat-end 表示含有多个顶层元素的重复区域的结束部分

ng-switch 根据数据绑定的值修改DOM中的元素

2.1 ng-repeat

ng-repeat 使用方法：

1) x in data  

2) (key,value) in data  

对ng-repeat指令所遍历的每个对象或者属性来说，第二个变量将被赋以数据对象或者属性值。第一个变量的使用方式则依赖于数据源。对于对象，key是当前属性名，而对于集合，key则是当前对象所处的位置。

3) x in data track by id

ng-repeat的内置变量

$index 返回当前对象或属性的位置

$first 在当前对象为集合中的第一个对象时返回true

$middle 在当前对象既不是集合中的第一个也不是最后一个对象时返回true

$last 在当前对象为集合中的最后一个对象时返回true

$even 对于集合中偶数编号的对象返回true

$odd 对于集合中奇数编号的对象返回true

这些变量的一个典型应用就是对表格元素生成经典的条纹效果

<tr ng-repeat="item in data" ng-class="$odd?'odd':'even'">

</tr>

2.2 ng-repeat-start & ng-repeat-end 重复生成多个顶层元素

<ul>
    <li ng-repeat-start="user in users">{{user.name}}</li>
    <li>the age is {{user.age}}</li>
    <li ng-repeat-end>{{user.email}}</li>
</ul>

三、使用局部视图工作

3.1 ng-include

1）ng-include指令从服务器截取一段HTML片段，编译并处理其中包含的任何指令，并添加到DOM中去。这些片段被称为局部视图。

<ng-include src="'table.html'"></ng-include>

Note: src属性是被当做JavaScript表达式进行计算的，要静态地定义一个文件，就得使用单引号将文件名包含起来。src的设置可以通过计算得到。

2）ng-include指令用作属性

用ng-include属性值表示src的值，onload属性是用于指定一个会在加载内容时被计算的表达式。

<div ng-include="viewHtml()" onload="change()"></div>

3.1 ng-switch

<div ng-switch on="data.mode">
    <div ng-switch-when="Table">
        <table>

        </table>
    </div>
    <div ng-switch-when="List">
        <ol>

        </ol>
    </div>
    <div ng-switch-default>
        <p>select option to display a layout</p>
    </div>
</div>

ng-switch指令可被当做元素使用，但是ng-switch-when和ng-switch-default部分只能当做属性使用。ng-switch指令中使用了on属性指定了一个表达式，用于计算并决定哪部分内容将被显示出来。

3.3 区别

当需要在较小而简单的内容块之间进行切换，而且在Web程序的正常执行过程中有机会向用户展示大部分或所有这些内容块时，使用ng-switch指令。这是因为必须将ng-switch指令所需的所有内容作为HTML文档的一部分交付，如果有内容不大可能会用到时这将会造成带宽的浪费和加载时间的变长。

ng-include属性适用于较复杂的内容或者在整个程序中需要分别独立使用的内容。当需要在不同地方包含进相同内容时，局部视图有助于减少项目中的重复内容。但是局部视图是直到第一次被引用时才会被请求的，这会在浏览器发出Ajax请求并从服务器接收响应时造成延迟。

四、隐藏未处理的内联模板绑定表达式 ng-cloak

在较慢的设备上对复杂内容进行处理时，在AngularJS仍在解析HTML、处理指令和进行准备工作时，会有一个浏览器对HTML进行加载显示的时刻，在这一时刻，所定义的任何内联模板表达式都会对用户是可见的。有两种方法解决这一问题：第一种避免使用内联模板表达式，使用ng-bind指令代替；第二种使用ng-cloak指令，它能够在AngularJS结束对内容的处理之前先将其隐藏。一种通常的做法是对body元素使用该指令，但是这意味着当Anglar处理内容时用户只能看到一个空白的浏览器窗口。所以应该有选择性地使用，将该指令应用到那些具有内联表达式的文档部分。

<div ng-switch on="data.mode" ng-cloak>

</div>