[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
