標籤：
指令，我將其理解為AngularJS操作HTML element的一種途徑。
由於學習AngularJS的第一步就是寫內建指令ng-app以指出該節點是應用的根節點，所以指令早已不陌生。
這篇日誌簡單記錄了一些內建指令，先使用起來，再談一些有趣的東西。
內建指令
所有的內建指令的首碼都為ng，不建議自訂指令使用該首碼，以免衝突。
首先從一些常見的內建指令開始。
先列出一些關鍵的內建指令，順便簡單說說範圍的問題。
ng-model
將表單控制項和當前範圍的屬性進行綁定，這麼解釋似乎也不太正確。
但先不要管咬文嚼字，用起來倒是易懂，例如:
<input type="text" ng-model="someModel.someProperty" /><br>{{someModel.someProperty}}ng-init
該指令被調用時會初始化內部範圍。
這個指令一般會出現在比較小的應用中，比如給個demo什麼的...
<div ng-init="job=‘fighter‘"> I‘m a/an {{job}}</div>除了ng-init，我們還有更多更好的選擇。
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的範圍。
<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>標籤感覺也夠用啊。
以表單驗證為例，在上一篇http://www.cnblogs.com/Kavlez/p/angularjsformvalidation.html中有這麼一段代碼:
<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)})ng-checked
這個是給<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，總之是遍曆集合，給每個元素產生模板執行個體，每個執行個體的範圍中可以用一些特殊屬性，如下:
不用特地解釋，這些都很容易看出來是幹什麼的，下面是一個例子:
<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 - 指令入門
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
