2.4.1.常用内置指令
常用内置指令有一些独特的性质。虽然可用表达式生成HTML代码从而与它们等效，但这些做法都是不推荐的。
ng-href
当使用当前作用域中的属性动态创建URL时，应该用ng-href代替href。Angular.js表达式可以设定大部分HTML元素的属性或者值，但单独设定锚链接的href属性是不可以的。这里的潜在问题是当用户点击一个由插值动态生成的链接时，如果插值尚未生效，将会跳转到错误的页面（通常是404）。
ng-src
与ng-href同理，AngularJS会告诉浏览器在ng-src对应的表达式生效之前不要加载图像，因为生效之前加载的图片是无效的。
ng-disabled
使用ng-disabled可以把disabled属性绑定到各表单输入字段上。当写普通的HTML输入字段时，如果在元素标签上出现了disabled属性就会禁用这个输入字段。
ng-checked
标准的checked属性是一个布尔属性，不需要进行赋值。通过ng-checked将某个表达式同是否出现checked属性进行绑定。要与ng-model联合使用才有效果。
ng-readonly
同其他布尔属性一样，HTML定义只会检查readonly属性是否出现，而不是它的实际值。通过ng-readonly可以将某个返回真或假的表达式同是否出现readonly属性进行绑定：
ng-selected
可以对是否出现option标签的selected属性进行绑定。
ng-include
加载、编译并包含外部HTML片段到当前的应用中。模板的URL被限制在与应用文档相同的域和协议下，可以通过白名单或包装成被信任的值来突破限制。更进一步，需要考虑跨域资源共享（Cross-Origin Resource Sharing，CORS）和同源规则（Same Origin Policy）来确保模板可以在任何浏览器中正常加载。例如，所有浏览器都不能进行跨域的请求，部分浏览器也不能访问file://协议的资源。
ng-switch
和ng-switch-when及on="propertyName"一起使用，可以在propertyName发生变化时渲染不同指令到视图中。
ng-if
根据表达式的值在DOM中生成或移除一个元素。同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是真正生成或移除节点。
ng-repeat
遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素都会被赋予自己的模板和作用域。同时每个模板实例的作用域中都会暴露一些特殊的属性。$index：遍历的进度（0... length-1）。$first：当元素是遍历的第一个时值为true。$middle：当元素处于第一个和最后元素之间时值为true$last：当元素是遍历的最后一个时值为true。$even：当$index值是偶数时值为true。$odd：当$index值是奇数时值为true。
ng-init
在指令被调用时设置内部作用域的初始状态。
ng-bind
尽管可以在视图中使用{{ }}模板语法（AngularJS内置的方式），我们也可以通过ng-bind指令实现同样的行为。内容会被当作子文本节点渲染到含有ng-bind指令的元素内。
ng-cloak
除使用ng-bind来避免未渲染元素闪烁，还可以在含有{{ }}的元素上使用ng-cloak指令。ng-cloak指令会将内部元素隐藏，直到路由调用对应的页面时才显示出来。
ng-bind-template
同ng-bind指令类似，ng-bind-template用来在视图中绑定多个表达式。
ng-model
将input、select、text area或自定义表单控件同包含它们的作用域中的属性进行绑定。它可以提供并处理表单验证功能，在元素上设置相关的CSS类（ng-valid、ng-invalid等），并负责在父表单中注册控件。
ng-show/ng-hide
根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏。类似地，当赋值给ng-hide指令的值为true时元素也会被隐藏。
ng-change
在表单输入发生变化时计算给定表达式的值。因为要处理表单输入，这个指令要和ngModel联合起来使用。
ng-form
在一个表单内部嵌套另一个表单。普通的HTML <form>标签不允许嵌套，但ng-form可以。内部所有的子表单都合法时，外部的表单才会合法。CSS类会根据表单的验证状态自动设置：表单合法时设置ng-valid；表单不合法时设置ng-invlid；表单未进行修改时设置ng-pristion；表单进行过修改时设置ng-dirty。
Angular不会将表单提交到服务器，除非它指定了action属性。要指定提交表单时调用哪个JavaScript方法，使用下面两个指令中的一个。ng-submit：在表单元素上使用。ng-click：在第一个按钮或submit类型（input[type=submit]）的输入字段上使用。
ng-click
ng-select/ng-options
将数据同HTML的<select>元素进行绑定。这个指令可以和ng-model以及ng-options指令一同使用，ng-options的值可以是一个内涵表达式（comprehension expression），它可以接受一个数组或对象，并对它们进行循环，将内部的内容提供给select标签内部的选项。数组作为数据源：用数组中的值做标签；用数组中的值作为选中的标签；用数组中的值做标签组；用数组中的值作为选中的标签组。对象作为数据源：用对象的键值（key-value）做标签；用对象的键值作为选中的标签；用对象的键值作为标签组；用对象的键值作为选中的标签组。
ng-class
style内不能使用angularjs表达式。使用ng-class动态设置元素的类，方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。当表达式发生变化，先前添加的类会被移除，新类会被添加。ng-class-even和ng-class-odd是AngularJS内置支持奇偶行不同外观的样式，内置CSS样式名是.even和.odd。代码范式：
ng-class="{CSS样式名:关系表达式,...}"
注意只有一个尖括号，不能不写尖括号，也不能写两个尖括号。
ng-style
把键值符合层叠样式表的对象赋给style。
ng-submit
将表达式同onsubmit事件进行绑定。这个指令同时会阻止默认行为（发送请求并重新加载页面），除非表单不含有action属性。
ng-attr-(suffix)
当AngularJS编译DOM时会查找花括号{{ some expression }}内的表达式。这些表达式会被自动注册到$watch服务中并更新到$digest循环中，成为它的一部分。有时浏览器会对属性会进行很苛刻的限制。SVG就是一个例子。
<svg>
<circle cx="{{ cx }}"></circle>
</svg>
运行上面的代码会抛出一个错误，指出我们有一个非法属性。可以用ng-attr-cx来解决这个问题。注意，cx位于这个名称的尾部。在这个属性中，通过用{{ }}来写表达式，达到前面提到的目的。
<svg>
<circle ng-attr-cx="{{ cx }}"><circle>
</svg>
示例工程：T91。
HTML代码：
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<Metacharset="UTF-8">
<title>T91</title>
<scripttype="text/javascript" src="../vendor/angular.js"></script>
<scripttype="text/javascript" src="../controllers/hello.js"></script>
</head>
<body ng-controller="HelloController">
<h1 align="center">
AngularJS常用内置指令
</h1>
<table border="1px" cellspacing="0" cellpadding="5" rules="all" style="border:solid 1px #0000FF" width="100%" align="center">
<tr>
<tdwidth="25%" align="right">链接：</td>
<tdwidth="75%">
当锚链接的链接指向的是作用域的变量时，错误的用法：<a href="{{href1}}">我的博客</a></li>。
正确的用法：<a ng-href="{{href2}}">我的博客</a>
</td>
</tr>
<tr>
<tdalign="right">图片：</td>
<tdvalign="center">
<divstyle="height: 64px;vertical-align: middle;line-height: 64px;float:left">这个后台报错：</div>
<imgstyle="float: left;" width="64px" height="64px" src="{{imgSrc1}}">
<divstyle="height: 64px;vertical-align: middle;line-height: 64px;float:left">，没问题的：</div>
<imgwidth="64px" height="64px" ng-src="{{imgSrc2}}">
</td>
</tr>
<tr>
<tdalign="right">启用与禁用：</td>
<td>
<buttonstyle="width:80px;height: 30px;" ng-click="onButton1Clicked(this)" ng-disabled="isButton1Disabled">{{button1Tip}}</button>
</td>
</tr>
<tr>
<tdalign="right">只读</td>
<td><textareastyle="width:98%" rows="5" ng-readonly="isTextarea1Readonly"></textarea></td>
</tr>
<tr>
<tdalign="right">复选框的值：</td>
<td><inputtype="checkBox"
value="再点我一下"
ng-init="checkBox1Value=true"
ng-model="checkBox1Value"
ng-checked="checkBox1Value"></td>
</tr>
<tr>
<tdalign="right">下拉列表框：</td>
<td>
<label>选中橘子：<input type="checkBox" ng-model="isSelectedSecond"></label>
<selectng-readonly="true" ng-disabled="true">
<option>苹果</option>
<optionng-selected="isSelectedSecond" >橘子</option>
<option>桃子</option>
</select>
</td>
</tr>
<tr>
<tdalign="right">包含网页：</td>
<td>
<divng-include="include.html" ng-controller="IncludeController" ng-init="name='李婷'">
你好,{{name}}
</div>
</td>
</tr>
<tr>
<tdalign="right">ng-switch：</td>
<td>
<inputtype="text" ng-model="person1.name" style="float: left;"/>
<divng-switch on="person1.name" style="float: left;">
<spanng-switch-default>胜利者是：</span>
<spanng-switch-when="李婷">{{ person1.name }}</span>
</div>
</td>
</tr>
<tr>
<tdalign="right">ng-if：</td>
<td>
<buttonstyle="float:left" ng-click="onNgif1Clicked()">增加</button>
<spanstyle="float:left">{{ngif1}}</span>
<divng-if="ngif1%2==0" style="float:left;color:blue">当数字是偶数的时候你才看得见我。</div>
</td>
</tr>
<tr>
<tdalign="right">ng-repeat：</td>
<td>
<tablewidth="80%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th>序号</th>
<th>值</th>
<th>第一个</th>
<th>中间</th>
<th>最后</th>
<th>偶数</th>
<th>奇数</th>
</tr>
<trng-repeat="ng in ngrepeat1">
<tdalign="center">{{$index}}</td>
<tdalign="center">{{ng}}</td>
<tdalign="center">{{$first}}</td>
<tdalign="center">{{$middle}}</td>
<tdalign="center">{{$last}}</td>
<tdalign="center">{{$even}}</td>
<tdalign="center">{{$odd}}</td>
</tr>
</table>
</td>
</tr>
<tr>
<tdalign="right">ng-init：</td>
<td><png-init="nginit1='你好，我在HTML中初始化的'">{{nginit1}}</p></td>
</tr>
<tr>
<tdalign="right">ng-bind：</td>
<td><png-bind="ngbind1"></p></td>
</tr>
<tr>
<tdalign="right">ng-cloak：</td>
<td><png-cloak>{{ngcloak1}}</p></td>
</tr>
<tr>
<tdalign="right">ng-bind-template：</td>
<td><png-bind-template="{{ngtemplate1}}{{ngtemplate2}}"></p></td>
</tr>
<tr>
<tdalign="right">ng-show/ng-hide：</td>
<td>
<spanng-show="ngshow1">你好</span><button ng-click="onNgshow1Clicked()" style="width:80px;height: 30px;">切换</button>
<spanng-hide="nghide1">ng-show和ng-hide</span><button ng-click="onNghide1Clicked()" style="width:80px;height: 30px;">显隐</button>
</td>
</tr>
<tr>
<tdalign="right">ng-options1：</td>
<td><div>
<selectng-model="options1"
ng-options="options1.namefor options1 in ngoptions1">
<optionvalue="">选择一个城市</option>
</select>
你最喜欢的城市: {{ options1.name }}
</div></td>
</tr>
<tr>
<tdalign="right">ng-attr-(stuff)：</td>
<td>
<table>
<tr><td>
<svgwidth="300" height="100" version="1.1" >
<circlecx="{{ngstuff1}}" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
</td><td>
<svgwidth="300" height="100" version="1.1" >
<circleng-attr-cx="{{ngstuff1}}" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
JS代码：
var module=angular.module("myApp",[]);
module.controller("HelloController",function($scope,$timeout){
$scope.button1Tip="点我试试";
$scope.isButton1Disabled=false;
$scope.isTextarea1Readonly=false;
$scope.checkBox1Value=false;
$scope.isSelectedSecond=false;
$scope.person1={
name:""
};
$scope.ngif1=1;
$scope.onButton1Clicked=function(dom){
$scope.href1="http://blog.csdn.net/caoshiying?viewmode=contents";
$scope.href2=$scope.href1;
$scope.imgSrc1="../images/ghl.jpg";
$scope.imgSrc2=$scope.imgSrc1;
console.log("已设置链接。");
$scope.isButton1Disabled=true;
$scope.isTextarea1Readonly=true;
$scope.button1Tip="不理你。";
};
$scope.$watch("checkBox1Value",function(){
console.log("复选框的值："+$scope.checkBox1Value);
});
$scope.onNgif1Clicked=function(){
$scope.ngif1+=1;
};
$scope.ngrepeat1=["杏","梨","桃","橘","苹"];
$scope.ngbind1="我可以赋值为InnerHTML";
$scope.ngcloak1="我在路由调用的时候显示的。"
$scope.ngtemplate1="你好，";
$scope.ngtemplate2="世界，template bind";
$scope.ngshow1=true;
$scope.nghide1=true;
$scope.onNgshow1Clicked=function(){
$scope.ngshow1=!$scope.ngshow1;
};
$scope.onNghide1Clicked=function(){
$scope.nghide1=!$scope.nghide1;
}
$scope.ngoptions1= [
{name:'Seattle'},
{name:'San Francisco'},
{name:'Chicago'},
{name:'New York'},
{name:'Boston'}
];
$scope.options1={};
$scope.ngstuff1=64;
});
module.controller("IncludeController",function($scope){
$scope.hello="我是另外一个网页。有标准的HTML头。";
});
