基礎ng屬性指令
ng-href
ng-src
ng-disabled
ng-checked
ng-readonly
ng-selected
ng-class
ng-style
布爾屬性
根據HTML標準定義，布爾屬性代表一個true或false值。當這個屬性出現時，這個屬性的值就是true（無論實際定義的值是什么）。如果未出現，這個屬性值就是false。
當AngularJS中使用動態數據綁定是，不能簡單地將這個屬性設置為true或false，因為根據標準定義只有當這個屬性不出現時，它的值才為false。因此AngularJS提供了一組帶有ng-前綴的布爾屬性，通過運算表達式的值來決定在目標元素上是插入還是移除對應的屬性。
- ng-disabled
使用ng-disabled可以把disabled屬性綁定到一下表單輸入字段上：
- <input> （text、checkbox、radio、number、url、email、submit）;
- <textarea>;
- <select>;
- <button>
- ng-readonly
同其他布爾屬性一樣，HTML定義只會檢查readonly屬性是否出現，而不是它的實際值。
通過ng-readonly可以將某個返回真或假的表達式同是否出現readonly屬性進行綁定
3.ng-checked
標準的checked屬性是一個布爾屬性，不需要進行賦值。通過ng-checked將某個表達式同是否出現checked屬性進行綁定。
4.ng-selected
ng-selected可以對是否出現option標簽的selected屬性進行綁定
類布爾屬性
ng-href、ng-src等屬性雖然不是標準的HTML布爾屬性，但是由于行為相似，所以在AngularJS源碼內部是和布爾屬性等對待的。
- ng-href
當使用當前作用域中的屬性動態創建URL時，應該用ng-href代替href。
這里的潛在問題是當用戶點擊一個由插值動態生成的鏈接時，如果插值尚未生效，將會跳轉到錯誤的頁面（通常是404）。
2.ng-src
AngularJS會告訴瀏覽器在ng-src對應的表達式生效之前不要加載圖像
在指令中使用子作用域
繼承的機制可以創建一個隔離層，用來將需要協同工作的方法和數據模型對象放置在一起。
ng-app和ng-controller是特殊的指令，因為它們會修改嵌套在它們內部的指令的作用域。
ng-app為Angluar應用創建$rootScope,ng-controller則會以$rootScope或另外一個ng-controller的作用域為原型創建新的子作用域。
1.任何具有ng-app屬性的DOM元素將被標記為$rootScope的起始點。
$rootScope是作用域鏈的起始點，任何嵌套在ng-app內的指令都會繼承它。
- ng-controller
內置指令ng-controller的作用是為嵌套在其中的指令創建一個子作用域，避免將所有操作和模型都定義在$rootScope上。用這個指令可以在一個DOM元素上放置控制器。
ng-controller接受一個參數expresson，這個參數是必須的。
expression參數是一個AngularJS表達式
子$scope只是一個JavaScript對象，其中含有從父級$scope中通過原型繼承得到的方法和屬性，包括應用的$rootScope。
嵌套在ng-controller中的指令有訪問新子$scope的權限，但要牢記每個指令都應該遵守的和作用域相關的規則。
$scope對象的職責是承載DOM中指令所共享的操作和模型。
- 操作指的是$scope上的標準JavaScript方法
- 模型指的是$scope上保存的包含瞬時狀態數據的JavaScript對象。持久化狀態的數據應該保存到服務中，服務的作用是處理模型的持久化。
- 出于技術和架構方面的原因，絕對不要直接將控制器中的$scope賦值為基礎類型的對象（字符串、布爾值或數字）。DOM中應該始終通過點操作符"."來訪問數據。
遵循這個規則將使你遠離不可預期的麻煩 - 控制器應該盡可能簡單。雖然可以用控制器來組織所有功能，但是將業務邏輯移到服務和指令中是非常好的主意。
ng-include
使用ng-include可以加載,編譯并包含外部HTML片段到當前的應用中.模板的URL被限制在于應用文檔相同的域和協議下,可以通過白名單或包裝成被信任的值來突破限制.更進一步,需要考慮跨域資源共享(Cross-Origin Resource Sharing, CORS)和同源規則(Same Origin Policy)來確保模板可以在任何瀏覽器中正常加載.
要記住,使用ng-include時AngularJS會自動創建一個子作用域.如果你想使用某個特定的作用域,例如ControllerA的作用域,必須在同一個DOM元素上添加ng-controller="ControllerA"指令,這樣當模板加載完成后,不會像往常一樣從外部作用域繼承并創建一個新的 子作用域.ng-switch
這個指令和ng-switch-when即on="propertyName"一起使用,可以在perpertyName發生變化是渲染不同指令到視圖中.ng-view
ng-view指令用來設置將被路由管理和放置在HTML中的視圖的位置.ng-if
使用ng-if指令可以完全根據表達式的值在DOM中生成或移除一個元素.如果賦值給ng-if的表達式的值是false,那對應的元素將會從DOM中移除(被注釋),否則對應元素的一個克隆將被重新插入DOM中(解除注釋).
ng-if同ng-show和ng-hide指令最本質的區別是,它不是通過CSS顯示或隱藏DOM節點.
當一個元素被ng-if從DOM中移除,同它關聯的作用域也會被銷毀.而且當它重新加入DOM中時,會通過原型繼承從它的父作用域生成一個新的作用域.ng-repeat
ng-repeat用來遍歷一個集合或為集合中的每個元素生成一個模板實例.集合中的每個元素都會被賦予自己的模板和作用域.同時每個模板實例的作用域都會暴露一些特殊的屬性.
- $index:遍歷的進度(0-length-1).
- $first:當元素是遍歷的第一個時值為true.
- $middle:當元素處于第一個和最后元素之間時值為true.
- $last:當元素是遍歷的最后一個時值為true.
- $even:當$index值是偶數時值為true.
- $odd:當$index值為奇數時值為true.
- ng-init
ng-init指令用來在指令被調用時設置內部作用域的初始狀態.
9.{{}}
{{}}語法是AngularJS內置的模板語法,它會在內部$scope和視圖之間創建綁定.基于這個綁定,只要$scope發生變化,視圖就會隨之自動更新.
事實上它也是指令,是ng-bind的簡略形式,這種形式不需要創建新的元素,因此它 常被用在行內文本中.
注意,屏幕可視的區域內使用{{}}會導致頁面加載時未渲染的元素發生閃爍,用ng-bind可以避免這個問題
ng-bind
同{{}}
HTML加載含有{{}}語法的元素后并不會立刻渲染它們,導致未渲染內容閃爍(Flash of Unrendered Content,FOUC).我們可以用ng-bind將內容同元素綁定在一起避免FOUC.內容會被當作子文本節點渲染到含有ng-bind指令的元素內.ng-cloak
除使用ng-bind來避免為渲染元素閃爍,還可以在含有{{}}的元素上使用ng-cloak指令
ng-cloak指令會將內部元素隱藏,直到路由調用對應的頁面時才顯示出來.
12.ng-bind-template
同ng-bind指令類似,ng-bind-template用來在視圖中綁定多個表達式.
13.ng-model
ng-model指令用來將input,select,textarea或自定義表單控件同包含它們的作用域中的屬性進行綁定.它可以提過并處理表單驗證功能,在元素上設置上設置相關的CSS類(ng-valid,ng-invalid),并負責在父表單中注冊控件.
它將當前作用域中運算表達式的值同給定的元素進行綁定,如果屬性并不存在,它會隱式創建并將其添加到當前作用域中.
我們應該始終用ng-model來綁定$scope上一個數據模型內的屬性,而不是$scope上的屬性,這可以避免在作用域或后代作用域中發生屬性覆蓋.
<input type="text" ng-model="modelName.someProperty"/>
- ng-show/ng-hide
ng-show和ng-hide根據所給的表達式的值來顯示或隱藏HTML元素.當賦值給ng-show指令的值為false時元素會被隱藏.類似地,當賦值給ng-hide指令的值為true時元素也會被隱藏.
15.ng-change
這個指令會在表單輸入發生變化時計算給定表達式的值.因為要處理表單輸入,這個指令要和ngModel聯合使用.
16.ng-form
ng-form用來在一個表單內部嵌套另一個表單。普通的HTML<form>標簽不允許嵌套，但ng-form可以
這意味內部所有的子表單都合法時，外部的表單才會合法。這對于用ng-repeat動態創建表單時非常有用的。
由于不能通過字符插值來給輸入元素動態地生成name屬性，所以需要將ng-form指令內每組重復的輸入字段都包含在一個外部表單元素內。
下面的CSS類會根據表單的驗證狀態自動設置：
- 表單合法時設置ng-valid
- 表達不合法時設置ng-invalid
- 表單未進行修改時設置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 用來指定一個元素被點擊時調用的方法或表達式。ng-select
ng-select 用來將數據同HTML的 <select> 元素進行綁定。這個指令可以和 ng-model 以及
ng-options 指令一同使用，構建精細且表現優良的動態表單。
ng-options 的值可以是一個內涵表達式（comprehension expression），其實這只是一種有趣
的說法，簡單來說就是它可以接受一個數組或對象，并對它們進行循環，將內部的內容提供給
select 標簽內部的選項。它可以是下面兩種形式。
- 數組作為數據源：
- 用數組中的值做標簽；
- 用數組中的值作為選中的標簽；
- 用數組中的值做標簽組；
- 用數組中的值作為選中的標簽組。
- 對象作為數據源：
- 用對象的鍵-值（key-value）做標簽；
- 用對象的鍵-值作為選中的標簽；
- 用對象的鍵-值作為標簽組；
- 用對象的鍵-值作為選中的標簽組。
ng-submit
ng-submit 用來將表達式同 onsubmit 事件進行綁定。這個指令同時會阻止默認行為（發送請求并重新加載頁面），除非表單不含有 action 屬性。ng-class
使用 ng-class 動態設置元素的類，方法是綁定一個代表所有需要添加的類的表達式。重復的類不會添加。當表達式發生變化，先前添加的類會被移除，新類會被添加。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>
