引言
前一段時間小編被這個angularJS給弄的頭昏腦漲的，並不是因爲這個東西很難，而是小編之前都是使用js和
jQuery來開發的，突然使用這個東西真是有點不適應啊，思想有點轉變不過來啊，當拿到一個需求之後再腦子中首先
想到的就是js怎麼來實現，結果被老大給訓斥一頓，最後說我“jQuery中毒太深啊”，不管還好在某一個時刻小編的
思想突然就轉變過來了，對這個angularJS產生了感覺，做什麼事情就怕有感覺，一旦有了感覺就非常容易了，所以
說最近小編一直在使用這個東西，用的到時挺順手的，下面就給大家總結一下angularJS中常用的一些指令：
ng-model
將表單控件和當前作用域的屬性進行綁定，這麼解釋似乎也不太正確。
<span style="font-size:18px;"><input type="text" ng-model="someModel.someProperty" /><br>
{{someModel.someProperty}}</span>ng-init
該指令被調用時會初始化內部作用域。這個指令一般會出現在比較小的應用中，比如給個demo什麼的...
<div ng-init="job='fighter'">
I'm a/an {{job}}
</div>ng-app
每一次用AngularJS都離不開這個指令，順便說下$rootScope。聲明瞭ng-app的元素會成爲$rootScope的起點，
而$rootScope是作用域鏈的根，通常聲明在<html>你懂的。也就是說根下的作用域都可以訪問它。但是，不建議過度
使用$rootScope，免得全局變量滿天飛，效率又差又難管。下面是一個例子:
<html ng-app="myApp">
<body>
{{ someProperty }}
</body>
<script>
var myApp = angular.module('myApp', [])
.run(function($rootScope) {
$rootScope.someProperty = 'hello computer';
});
</script>
</html>ng-controller
我們用這個指令在一個DOM元素上裝上controller。一個控制器? 確實，從字面意思上這樣理解倒是不錯，那我們
爲什麼需要控制器?記得AngularJS 1.2.x時還可以這樣定義controller來着...
function ohMyController($scope) {
//...
}AngularJS 1.3.x中禁止了這種方式，因爲這種方式會讓controller滿天飛，分不清層次，所有東西都掛在
$rootScope上... ng-controller必須有一個表達式作爲參數，另外通過$scope來繼承上級$scope的方法和屬性什麼
的，$rootScope也包括在內。
下面只是一個簡單的例子，ancestor無法訪問child的作用域。
</pre><pre name="code" class="csharp"><div ng-controller="AncestorController">
{{ ancestorName }}
{{ childName }}
<div ng-controller="ChildController">
{{ ancestorName }}
{{ childName }}
</div>
</div>
<script>
var myApp = angular.module('myApp', [])
.controller('ChildController', function($scope) {
$scope.childName = 'child';
})
.controller('AncestorController', function($scope) {
$scope.ancestorName = 'ancestor';
});
</script>ng-form
起初不明白爲什麼會有個表單指令，<form>標籤感覺也夠用啊。以表單驗證爲例，在上一篇中有這麼一段代碼:
<input type="submit" ng-disabled="mainForm.$invalid" />也就是表單的狀態爲$invalid時禁用提交按鈕。如果場景再稍微複雜一點點，比如一個父表單中有多個子表
單，子表單中有3個驗證通過時父表單便可以提交。但是，<form>是不可以嵌套的。考慮到這種場景，我們便使用ng-
form指令來解決這一問題。
<form name="mainForm" novalidate>
<div ng-form="form1">
姓名:<input type="text" ng-required="true" ng-model="name"/><br>
證件號碼:<input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="idnum"/>
</div>
<br>
<div ng-form="form2">
監護人姓名:<input type="text" ng-required="true" ng-model="gname"/><br>
監護人證件號碼:<input type="number" ng-minLength="15" ng-maxLength="18" ng-required="true" ng-model="gidnum"/>
</div>
<button ng-disabled="form1.$invalid && form2.$invalid">submit all</button>
</form>ng-disabled
像這種只要出現則生效的屬性，我們可以在AngularJS中通過表達式返回值true/false令其生效。禁用表單輸入
字段。
<textarea ng-disabled="1+1==2">1+1=?</textarea>ng-readonly
通過表達式返回值true/false將表單輸入字段設爲只讀。弄個例子，3秒後變成只讀.
<input type="text" ng-readonly="stopTheWorld" value="stop the world after 3s"/>
.run(function($rootScope,$timeout){
$rootScope.stopTheWorld=false;
$timeout(function(){
$rootScope.stopTheWorld = true;
},3000)
})這個是給<input type="checkbox" />用的，比如...
<input type="checkbox" ng-checked="someProperty" ng-init="someProperty = true" ng-model="someProperty">ng-selected
給<select>裏面的<option>用的，例子:
<label>
<input type="checkbox" ng-model="isFullStack">
I'm Full Stack Engineer
</label>
<select>
<option>Front-End</option>
<option>Back-End</option>
<option ng-selected="isFullStack">Full Stack !!!</option>
</select>ng-show/ng-hide
根據表達式顯示/隱藏HTML元素，注意是隱藏，不是從DOM移除，例如:
<div ng-show="1+1 == 2">
1+1=2
</div>
<div ng-hide="1+1 == 3">
you can't see me.
</div>ng-change
不是HTML那套onXXX之類的，而是ng-XXX。結合ng-model使用，以ng-change爲例:
<input type="text" ng-model="calc.arg" ng-change="calc.result = calc.arg*2" />
<code>{{ calc.result }}</code> 或者比如ng-options
{{}}
其實這個也是一個指令，也許覺得和ng-bind差不多，但頁面渲染略慢時可能會被看到。
另外，{{}}的performance遠不如ng-bind，只是用起來很方便。
ng-bind
ng-bind的行爲和{{}}差不多，只是我們可以用這個指令來避免FOUC(Flash Of Unrendered Content)，也就是未渲染導致的閃爍。
ng-cloak
ng-cloak也可以爲我們解決FOUC。 ng-cloak會將內部元素隱藏，直到路由調用對應的頁面。
ng-if
如果ng-if中的表達式爲false，則對應的元素整個會從DOM中移除而非隱藏，但審查元素時你可以看到表達式變成註釋了,如果相進行隱藏，可以使用ng-hide。
<div ng-if="1+1===3">
無法審查到該元素
</div>
<div ng-hide="1+1==2">
可審查
</div>ng-switch
單獨使用沒什麼意思，下面是例子:
<div ng-switch on="1+1">
<p ng-switch-default>0</p>
<p ng-switch-when="1">1</p>
<p ng-switch-when="2">2</p>
<p ng-switch-when="3">3</p>
</div>ng-repeat
不明白爲毛不叫iterate，總之是遍歷集合，給每個元素生成模板實例，每個實例的作用域中可以用一些特殊屬性，如下:
$index
$first
$last
$middle
even
odd不用特地解釋，這些都很容易看出來是幹什麼的，下面是一個例子:
<ul>
<li ng-repeat="char in
[{'alphabet': 'K'},
{'alphabet': 'A'},
{'alphabet': 'V'},
{'alphabet': 'L'},
{'alphabet': 'E'},
{'alphabet': 'Z'}] " ng-show="$even">{{char.alphabet}}</li>
</ul>ng-href
起初我在一個文本域中弄了個ng-model，然後像這樣<a href="{{myUrl}}">在href裏面寫了進去。其實這樣href
和ng-href看不出什麼區別，所以我們可以試試這樣:
<ul ng-init="myHref=''">
<li><a ng-href="{{ myHref }}">{{linkText}}</a></li>
<li><a href="{{ myHref }}">可以點擊，但不一定是正確的地址</a></li>
</ul>
.run(function($rootScope, $timeout) {
$rootScope.linkText = '尚未加載，您無法點擊';
$timeout(function() {
$rootScope.linkText = '請點擊'
$rootScope.myHref = 'http://google.com';
}, 2000);
})ng-src
大同小異，即表達式生效前不要加載該資源。例子(ps: 圖片不錯! ):
<img ng-src="{{imgSrc}}"/>
.run(function($rootScope, $timeout) {
$timeout(function() {
$rootScope.imgSrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif';
}, 2000);
})ng-class
用作用域中的對象動態改變類樣式，例如:
<style>
.red {background-color: red;}
.blue {background-color: blue;}
</style>
<div ng-controller="CurTimeController">
<button ng-click="getCurrentSecond()" >Get Time!</button>
<p ng-class="{red: x%2==0,blue: x%2!=0}" >Number is: {{ x }}</p>
</div>
.controller('CurTimeController', function($scope) {
$scope.getCurrentSecond = function() {
$scope.x = new Date().getSeconds();
};
}) 小結
以上是最近小編在初始angularJS的時候常用的一些指令，這些指令也是在項目中經常用到的一些指令。所以小
編總結了一下，希望對對讀者有一些幫助！