[TOC]
## 第九章 内置指令
### 9.1 基础 ng 属性指令
* ng-href
* ng-src
* ng-disabled
* ng-checked
* ng-readonly
* ng-selected
* ng-class
* ng-style
#### 9.1.1 布尔属性
##### 1. ng-disabled
可以绑定到以下表单
* <input> (text, checkbox, radio, number, url, email, submit)
* <textarea>
* <select>
* <button>
```html
<textarea ng-disabled="true|false">Wait5seconds</textarea>
```
##### 2. ng-readonly
```html
<input type="text" ng-readonly="someProperty" value="Some text here"/>
```
##### 3. ng-checked
```html
<input type="checkbox" ng-checked="someProperty" ng-model="someProperty">
```
##### 4. ng-selected
```html
<select name="gender">
<option value="male" ng-selected="gender == 'male'">男</option>
<option value="female" ng-selected="gender == 'female'">女</option>
</select>
```
#### 9.1.2 类布尔属性
##### 1. ng-href
当使用当前作用域中的属性动态创建URL时，应该用ng-href代替href。
```html
<a ng-href="{{ myHref }}">click</a>
```
##### 2. ng-src
AngularJS会告诉浏览器在ng-src对应的表达式生效之前不要加载图像
```html
<img ng-src="{{ myHref }}" />
```
#### 9.2.1 在指令中使用子作用域
##### 1. ng-app
##### 2. ng-controller
##### 3. ng-include (P82)
使用 `ng-include` 可以 **加载**、**编译** 并 **包含** 外部HTML片段到当前的应用中。模板的URL被限制在与应用文档相同的域和协议下。
使用 `ng-include` 时AngularJS会 **自动创建一个子作用域**。如果你想使用某个特定的作用域，例如 `MyController` 的作用域，必须在同一个 DOM 元素上添加 `ng-controller ="MyController"`指令，这样当模板加载完成后，不会像往常一样从外部作用域继承并创建一个新的子作用域。
```html
<div ng-include="/myTemplateName.html"
ng-controller="MyController"
ng-init="name = 'World'">
Hello {{ name }}
</div>
```
##### 4. ng-switch
```html
<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>
```
##### 5. ng-view
`ng-view` 指令用来设置将被路由管理和放置在HTML中的视图的位置。
##### 6. ng-if
根据表达式的值在DOM中 **生成** 或 **移除** 一个元素。
`ng-if` 同 `no-show` 和 `ng-hide` 指令最本质的区别是，它不是通过CSS **显示** 或 **隐藏** DOM节点，而是真正生成或移除节点。
```html
<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>
```
##### 7. ng-repeat
`ng-repeat` 用来遍历一个集合或为集合中的每个元素生成一个模板实例。
* $index：遍历的进度（0 ~ length-1）。
* $first：当元素是遍历的第一个时值为 `true`。
* $middle：当元素处于第一个和最后元素之间时值为 `true`。
* $last：当元素是遍历的最后一个时值为 `true`。
* $even：当$index值是偶数时值为 `true`。
* $odd：当$index值是奇数时值为 `true`。
```html
<ul ng-controller="PeopleController">
<li ng-repeat="person in people" ng-class="{even: !$even, odd: !$odd}">
{{person.name}} lives in {{person.city}}
</li>
</ul>
```
```javascript
angular.module('myApp',[])
.controller('PeopleController',function($scope) {
$scope.people = [
{name: "Ari", city: "San Francisco"},
{name: "Erik", city: "Seattle"}
];
});
```
##### 8. ng-init
ng-init指令用来在指令被调用时设置内部作用域的初始状态。
```html
<div ng-init="greeting='Hello';person='World'">
{{greeting}} {{person}}
</div>
```
##### 9. {{ }}
内置的模板语法, 实际上它是`ng-bind`的简略形式.
```html
<p>{{greeting}}</p>
```
> 在屏幕可视的区域内使用 `{{ }}` 会导致页面加载时未渲染的元素发生 **闪烁**，用 `ng-bind`
可以避免这个问题。
##### 10. ng-bind
```html
<p ng-bind="greeting"></p>
```
##### 11. ng-bind-template
`ng-bind-template`用来在视图中绑定多个表达式。
```html
<p ng-bind-template="{{lastName}}{{firstName}}"></p>
```
##### 12. ng-cloak
`ng-cloak` 指令会将内部元素隐藏，直到路由调用对应的页面时才显示出来。
```html
<body ng-init="greeting='HelloWorld'">
<p ng-cloak>{{ greeting }}</p>
<p>{{greeting}}</p>
</body>
```
##### 13. ng-model
`ng-model` 指令用来将 `input` 、`select`、`textarea` 或自定义表单控件同包含它们的作用域中的属性进行绑定。它可以提供并处理表单验证功能。
如果属性并不存在，它会隐式创建并将其添加到当前作用域中。
```html
<input type="text" ng-model="modelName.someProperty"/>
```
##### 14. ng-show / ng-hide
`ng-show` 和 `ng-hide` 根据所给表达式的值(布尔值)来显示或隐藏HTML元素。
```html
<div ng-show="2 + 2 == 5">
2 + 2 isn't 5, don't show
</div>
```
##### 15. ng-change
这个指令会在表单输入发生变化时计算给定表达式的值。因为要处理表单输入，这个指令要和 `ngModel` **联合使用**。
```html
<input type="text" ng-model="user.age" ng-change="change()"/>
<code>{{ user.length_of_service }}</code>
```
##### 16. ng-form
`ng-form` 用来在一个表单内部嵌套另一个表单。这意味着内部所有的子表单都合法时，外部的表单才会合法。
Angular不会将表单提交到服务器，除非它指定了 `action` 属性。要指定提交表单时调用哪个JavaScript方法，使用下面 **两个指令中的一个**。
* ng-submit：在表单元素上使用。
* ng-click：在第一个按钮或submit类型（input[type=submit]）的输入字段上使用。
```html
<style>
input.ng-invalid {
border: 1px solid red;
}
input.ng-valid {
border: 1px solid green;
}
</style>
<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" placeholder="{{field.placeholder}}" ng-required="field.isRequired" ng-model="field.name"/>
<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>
```
```javascript
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!");
};
});
```
##### 17. ng-click P88
