一、基础ng 属性指令：
? ng-href
? ng-src
? ng-disabled
? ng-checked
? ng-readonly
? ng-selected
? ng-class
? ng-style
布尔属性的有：
ng-disabled、ng-readonly、ng-checked、ng-selected
类布尔属性有：
ng-href、ng-src
二、在指令中使用子作用域
? ng-app
? ng-controller
? ng-include
使用ng-include可以加载、编译并包含外部HTML片段到当前的应用中。模板的URL被限制
在与应用文档相同的域和协议下，可以通过白名单或包装成被信任的值来突破限制。更进一步，
需要考虑跨域资源共享（Cross-Origin Resource Sharing，CORS）和同源规则（Same Origin Policy）
来确保模板可以在任何浏览器中正常加载。例如，所有浏览器都不能进行跨域的请求，部分浏览
器也不能访问file://协议的资源。
在开发中，可以通过命令行命令chrome --allow-file-access-from-files来
禁止CORS错误。只在紧急情况下使用这个方法，比如你的老板正站在你身后，
并且所有事情都无法正常工作。
在同一个元素上添加onload属性可以在模板加载完成后执行一个表达式。
要记住，使用ng-include时AngularJS会自动创建一个子作用域。如果你想使用某个特定的作
用域，例如ControllerA的作用域，必须在同一个DOM元素上添加ng-controller ="ControllerA"
指令，这样当模板加载完成后，不会像往常一样从外部作用域继承并创建一个新的子作用域。下
面看一个例子：
<div ng-include="/myTemplateName.html"
ng-controller="MyController"
ng-init="name = ‘World‘">
Hello {{ name }}
</div>
? ng-switch
这个指令和ng-switch-when及on="propertyName"一起使用，可以在propertyName发生变
化时渲染不同指令到视图中。在下面的例子中，当person.name是Ari时，文本域下面的div会显
示出来，并且这个人会获得胜利：
<input type="text" ng-model="person.name"/>
<div ng-switch on="person.name">
<p ng-switch-default>And the winner is</p>
<h1 ng-switch-when="Ari">{{ person.name }}</h1>
</div>
注意，在switch被调用之前我们用ng-switch-default来输出默认值。
? ng-view
ng-view指令用来设置将被路由管理和放置在HTML中的视图的位置。
? ng-if
使用ng-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if
的表达式的值是false，那对应的元素将会从DOM中移除，否则对应元素的一个克隆将被重新插
入DOM中。
ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而
是真正生成或移除节点。
当一个元素被ng-if从DOM中移除，同它关联的作用域也会被销毁。而且当它重新加入DOM
中时，会通过原型继承从它的父作用域生成一个新的作用域。
同时有一个重要的细节需要知道，ngIf重新创建元素时用的是它们编译后的状态。如果ng-if
内部的代码加载之后被jQuery修改过（例如用.addClass），那么当ng-if的表达式值为false时，
这个DOM元素会被移除，表达式再次成为true时这个元素及其内部的子元素会被重新插入
DOM，此时这些元素的状态会是它们的原始状态，而不是它们上次被移除时的状态。也就是说
无论用jQuery的.addClass添加了什么类都不会存在了。
<div ng-if="2+2===5"> Won‘t see this DOM node, not even in the source code </div> <div ng-if="2+2===4"> Hi, I do exist </div>
? ng-repeat
ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素
都会被赋予自己的模板和作用域。同时每个模板实例的作用域中都会暴露一些特殊的属性。
? $index：遍历的进度（0...length-1）。
? $first：当元素是遍历的第一个时值为true。
? $middle：当元素处于第一个和最后元素之间时值为true。
? $last：当元素是遍历的最后一个时值为true。
? $even：当$index值是偶数时值为true。
? $odd：当$index值是奇数时值为true。
下面的例子展示了如何用$odd和$even来制作一个红蓝相间的列表。记住，JavaScript中数组
的索引从0开始，因此我们用!$even和!$odd来将$even和$odd的布尔值反转。
<ul ng-controller="PeopleController">
<li ng-repeat="person in people" ng-class="{even: !$even, odd: !$odd}">
{{person.name}} lives in {{person.city}}
</li>
</ul>
.odd {
background-color: blue;
}
.even {
background-color: red;
}
angular.module(‘myApp‘,[])
.controller(‘PeopleController‘,function($scope) {
$scope.people = [
{name: "Ari", city: "San Francisco"},
{name: "Erik", city: "Seattle"}
];
});
? ng-init
ng-init指令用来在指令被调用时设置内部作用域的初始状态。
? ng-bind
尽管可以在视图中使用{{ }}模板语法（AngularJS内置的方式），我们也可以通过ng-bind
指令实现同样的行为。
<body ng-init="greeting=‘HelloWorld‘"> <p ng-bind="greeting"></p> </body>
HTML加载含有{{ }}语法的元素后并不会立刻渲染它们，导致未渲染内容闪烁（Flash of
Unrendered Content，FOUC）。我可以用ng-bind将内容同元素绑定在一起避免FOUC。内容会被
当作子文本节点渲染到含有ng-bind指令的元素内。
? ng-cloak
除使用ng-bind来避免未渲染元素闪烁，还可以在含有{{ }}的元素上使用ng-cloak指令：
<body ng-init="greeting=‘HelloWorld‘">
<p ng-cloak>{{ greeting }}</p>
</body>
ng-cloak指令会将内部元素隐藏，直到路由调用对应的页面时才显示出来。
? ng-bind-template
<div
ng-bind-template="{{message}}{{name}}">
</div>
? ng-model
ng-model指令用来将input、select、text area或自定义表单控件同包含它们的作用域中
的属性进行绑定。它可以提供并处理表单验证功能，在元素上设置相关的CSS类（ng-valid、
ng-invalid等），并负责在父表单中注册控件。
它将当前作用域中运算表达式的值同给定的元素进行绑定。如果属性并不存在，它会隐式创
建并将其添加到当前作用域中。
我们应该始终用ngModel来绑定$scope上一个数据模型内的属性，而不是$scope上的属性，
这可以避免在作用域或后代作用域中发生属性覆盖。
例如：
<input type="text" ng-model="modelName.someProperty" />
? ng-show/ng-hide
ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的
值为false时元素会被隐藏。类似地，当赋值给ng-hide指令的值为true时元素也会被隐藏。
元素的显示或隐藏是通过移除或添加ng-hide这个CSS类来实现的。.ng-hide类被预先定义
在了AngularJS的CSS文件中，并且它的display属性的值为none（用了!important标记）。
<div ng-show="2 + 2 == 5"> 2 + 2 isn‘t 5, don‘t show </div> <div ng-show="2 + 2 == 4"> 2 + 2 is 4, do show </div> <div ng-hide="2 + 2 == 5"> 2 + 2 isn‘t 5, don‘t hide </div> <div ng-hide="2 + 2 == 4"> 2 + 2 is 4, do hide </div>
? ng-change
这个指令会在表单输入发生变化时计算给定表达式的值。因为要处理表单输入，这个指令要
和ngModel联合起来使用。
<div ng-controller="EquationController">
<input type="text"
ng-model="equation.x"
ng-change="change()" />
<code>{{ equation.output }}</code>
</div>
angular.module(‘myApp‘,[])
.controller(‘EquationController‘,function($scope) {
$scope.equation = {};
$scope.change = function() {
$scope.equation.output
= parseInt($scope.equation.x) + 2;
};
});
上面的例子中，只要文本输入字段中的内容发生了变化就会改变equation.x的值，进而运
行change()函数。
? ng-form
ng-form用来在一个表单内部嵌套另一个表单。普通的HTML <form>标签不允许嵌套，但
ng-form可以。
这意味着内部所有的子表单都合法时，外部的表单才会合法。这对于用ng-repeat动态创建
表单是非常有用的。
由于不能通过字符插值来给输入元素动态地生成name属性，所以需要将ng-form指令内每组
重复的输入字段都包含在一个外部表单元素内。
下面的CSS类会根据表单的验证状态自动设置：
? 表单合法时设置ng-valid；
? 表单不合法时设置ng-invlid；
? 表单未进行修改时设置ng-pristion；
? 表单进行过修改时设置ng-dirty。
Angular不会将表单提交到服务器，除非它指定了action属性。要指定提交表单时调用哪个
JavaScript方法，使用下面两个指令中的一个。
? ng-submit：在表单元素上使用。
? ng-click：在第一个按钮或submit类型（input[type=submit]）的输入字段上使用。
为了避免处理程序被多次调用，只使用下面两个指令中的一个。
下面的例子展示了如何通过服务器返回的JSON数据动态生成一个表单。我们用ng-loop来遍
历从服务器取回的所有数据。由于不能动态生成name属性，而我们又需要这个属性做验证，所以
在循环的过程中会为每一个字段都生成一个新表单。
由于AngularJS中用来取代<form>的ng-form指令可以嵌套，并且外部表单在所有子表单都合
法之前一直处于不合法状态，因此我们可以在动态生成子表单的同时使用表单验证功能。是的，
鱼和熊掌可以兼得。
下面先看一下我们硬编码的JSON数据，把它假设成是从服务器返回的：
angular.module(‘myApp‘,[])
.controller(‘FormController‘,function($scope) {
$scope.fields = [
{placeholder: ‘Username‘, isRequired: true},
{placeholder: ‘Password‘, isRequired: true},
{placeholder: ‘Email (optional)‘, isRequired: false}
];
$scope.submitForm = function() {
alert("it works!");
};
});
下面用这些数据生成一个有验证功能的动态表单：
<form name="signup_form"
ng-controller="FormController"
ng-submit="submitForm()" novalidate>
<div ng-repeat="field in fields"
ng-form="signup_form_input">
<input type="text"
name="dynamic_input"
ng-required="field.isRequired"
ng-model="field.name"
placeholder="{{field.placeholder}}" />
<div
ng-show="signup_form_input.dynamic_input.$dirty &&
signup_form_input.dynamic_input.$invalid">
<span class="error"
ng-show="signup_form_input.dynamic_input.$error.required">
The field is required.
</span>
</div>
</div>
<button type="submit"
ng-disabled="signup_form.$invalid">
Submit All
</button>
</form>
input.ng-invalid {
border: 1px solid red;
}
input.ng-valid {
border: 1px solid green;
}
? ng-click
ng-click用来指定一个元素被点击时调用的方法或表达式。
<div ng-controller="CounterController">
<button ng-click="count = count + 1"
ng-init="count=0">
Increment
</button>
count: {{ count }}
<button ng-click="decrement()">
Decrement
</button>
<div>
angular.module(‘myApp‘,[])
.controller(‘CounterController‘, function($scope) {
$scope.decrement = function() {
$scope.count = $scope.count - 1;
};
})
? ng-select
ng-select用来将数据同HTML的<select>元素进行绑定。这个指令可以和ng-model以及
ng-options指令一同使用，构建精细且表现优良的动态表单。
ng-options的值可以是一个内涵表达式（comprehension expression），其实这只是一种有趣
的说法，简单来说就是它可以接受一个数组或对象，并对它们进行循环，将内部的内容提供给
select标签内部的选项。它可以是下面两种形式。
? 数组作为数据源：
? 用数组中的值做标签；
? 用数组中的值作为选中的标签；
? 用数组中的值做标签组；
? 用数组中的值作为选中的标签组。
? 对象作为数据源：
? 用对象的键?值（key-value）做标签；
? 用对象的键?值作为选中的标签；
? 用对象的键?值作为标签组；
? 用对象的键?值作为选中的标签组。
下面看一个ng-select指令的实例：
<div ng-controller="CityController">
<select ng-model="city"
ng-options="city.name for city in cities">
<option value="">Choose City</option>
</select>
Best City: {{ city.name }}
</div>
angular.module(‘myApp‘,[])
.controller(‘CityController‘,function($scope) {
$scope.cities = [
{name: ‘Seattle‘},
{name: ‘San Francisco‘},
{name: ‘Chicago‘},
{name: ‘New York‘},
{name: ‘Boston‘}
];
});
? ng-submit
ng-submit用来将表达式同onsubmit事件进行绑定。这个指令同时会阻止默认行为（发送请
求并重新加载页面），除非表单不含有action属性。
<form ng-submit="submit()"
ng-controller="FormController">
Enter text and hit enter:
<input type="text"
ng-model="person.name"
name="person.name" />
<input type="submit"
name="person.name"
value="Submit" />
<code>people={{people}}</code>
<ul ng-repeat="(index, object) in people">
<li>{{ object.name }}</li>
</ul>
</form>
angular.module(‘myApp‘,[])
.controller(‘FormController‘,function($scope) {
$scope.person = {
name: null
};
$scope.people = [];
$scope.submit = function() {
if ($scope.person.name) {
$scope.people.push({name: $scope.person.name});
$scope.person.name = ‘‘;
}
};
});
? ng-class
使用ng-class 动态设置元素的类，方法是绑定一个代表所有需要添加的类的表达式。重复
的类不会添加。当表达式发生变化，先前添加的类会被移除，新类会被添加。
下面的例子会用ng-class在一个随机数大于5时将.red类添加到一个div上：
<div ng-controller="LotteryController">
<div ng-class="{red: x > 5}"
ng-if="x > 5">
You won!
</div>
<button ng-click="x = generateNumber()"
ng-init="x = 0">
Draw Number
</button>
<p>Number is: {{ x }}</p>
</div>
.red {
background-color: red;
}
angular.module(‘myApp‘,[])
.controller(‘LotteryController‘, function($scope) {
$scope.generateNumber = function() {
return Math.floor((Math.random()*10)+1);
};
});
? ng-attr-(suffix)
当AngularJS编译DOM时会查找花括号{{ some expression }}内的表达式。这些表达式会
被自动注册到$watch服务中并更新到$digest循环中，成为它的一部分：
<-- updated when`someExpression` on the$scope
is updated -->
<h1>Hello{{someExpression}}</h1>
有时浏览器会对属性会进行很苛刻的限制。SVG就是一个例子：
<svg>
<circle cx="{{ cx }}"></circle>
</svg>
运行上面的代码会抛出一个错误，指出我们有一个非法属性。可以用ng-attr-cx来解决这
个问题。注意，cx位于这个名称的尾部。在这个属性中，通过用{{ }}来写表达式，达到前面提
到的目的。
<svg>
<circle ng-attr-cx="{{ cx }}"><circle>
</svg>