粗略地翻了一遍《JavaScript DOM編程藝術》，就以為可以接過AngularJS的一招半式，一個星期過去了，我發現自己還是Too Young，Too Simple！（剛打照面的時候，我就被亂棍砸暈了-_-!）
1.AngularJS是何方神聖
Angular JS (Angular.JS) 是一組用來開發Web頁面的框架、模板以及數據綁定和豐富UI組件。它支持整個開發進程，提供web應用的架構，無需進行手工DOM操作。
AngularJS是為了克服HTML在構建應用上的不足而設計的。HTML是一門很好的為靜態文本展示設計的聲明式語言，但要構建WEB應用的話它就顯得乏力了。這里AngularJS就應運而生，彌補了HTML的天然缺陷，用於構件Web應用等。
2.如何了解AngularJS
AngularJS誕生於2009年,由Misko Hevery 等人創建,后為Google所收購。
AngularJS官網：http://www.angularjs.org（一般來說會被牆掉，所以可以訪問下面的網站）
AngularJS中文網站：http://www.ngnice.com
書籍：《AngularJS 權威教程》《用AngularJS開發下一代Web應用》等。個人意見，For your information
備注：視頻教程，最近有看過大漠老師的AngularJS教程，覺得還不錯，但是感覺沒有一點基礎還是聽不懂的，或者要看好幾遍（不是做廣告）
3.為什么要了解AngularJS
一項新技術能夠面世，為眾人所知，從而脫引而出，定然不是空穴來風，肯定有其標新立異的過人之處，主要有以下幾點：
（1）MVC的思想（或者是MVVM）
（2）模塊化和依賴注入
（3）雙向數據綁定
（4）指令
每一個特性都可以大篇幅的展開，顯然，目前能力不夠，沒法展開，有興趣可以網上搜下，大體了解。
今天主要來說說AngularJS的三個指令“@”，“=”，“&”的用法和區別（這個問題困擾了我大半天，和Frank交流多次，我才明白）
1.指令作用域中的@
作用是把當前屬性作為字符串傳遞。
先上代碼，前台界面：
1 <!doctype html> 2 <html ng-app="MyModule"> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="../css/bootstrap.css"> 6 </head> 7 <body> 8 <div ng-controller="MyCtrl"> 9 <drink water="{{pureWater}}"></drink> 10 </div> 11 </body> 12 <script src="../js/angular.js"> 13 <script src="ScopeAt.js"></script> 14 </html>
JS代碼：
1 var myModule = angular.module("MyModule", []); 2 myModule.controller('MyCtrl', ['$scope', function($scope){ 3 $scope.pureWater="純凈水"; 4 }]) 5 myModule.directive("drink", function() { 6 return { 7 restrict:'AE', 8 scope:{ 9 water:'@' 10 }, 11 template:"<div>{{water}}</div>" 12 } 13 });
執行的結果平淡無奇，卻暗藏玄機：
（1）HTML頁面中，聲明一個標簽<drink></drink>，其中定義一個屬性名：water 屬性值：pureWater（這里的{{}}是angularjs的一種常見表達式，類似於ng-model，用於值綁定）
（2）JS文件中，首先從模塊開始，然后創建一個控制器行2~行4，再定義一個指令，主要實現的是將"<drink></drink>"替換為"<div>{{water}}</div>"標簽顯示
（3）重點介紹這里的
scope:{
water:'@'
}
該表達式等價於：
link:function(scope,element,attrs){
scope.water=attrs.water;
}
具體含義就是在指令的scope上定義一個屬性名：water，它的值就是前台界面中water屬性的值，也就是"{{pureWater}}";
同時{{pureWater}}的值我們從聲明的控制器可以看出：
$scope.pureWater="純凈水";
所以最終頁面顯示的是“純凈水”，主要的流程就是：
a.在指令中，通過@實現指令與HTML頁面元素關聯;
b.在控制器中又實現了與頁面的聯系;
c.從而借助HTML頁面建立起控制器與指令的聯系，也是一種通訊方式。
具體見下圖：
2.指令作用域中的=
作用是與父scope中的屬性進行雙向綁定。
1 <!doctype html> 2 <html ng-app="MyModule"> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="../css/bootstrap.css"> 6 </head> 7 <body> 8 <div ng-controller="MyCtrl"> 9 Ctrl: 10 <br> 11 <input type="text" ng-model="pureWater"> 12 <br> 13 Directive: 14 <br> 15 <drink water="pureWater"></drink> 16 </div> 17 </body> 18 <script src="../js/angular.js"></script> 19 <script src="ScopeEqual.js"></script> 20 </html>
1 var myModule = angular.module("MyModule", []); 2 myModule.controller('MyCtrl', ['$scope', function($scope){ 3 $scope.pureWater="純凈水"; 4 }]) 5 myModule.directive("drink", function() { 6 return { 7 restrict:'AE', 8 scope:{ 9 water:'=' 10 }, 11 template:'<input type="text" ng-model="water"/>' 12 } 13 });
這里=的手段類似，通過頁面設置兩個輸入框，分別代表指令和控制器的作用域，在JS代碼實現了雙向綁定，做到了控制器與指令在各自作用域內能夠影響對方，也就是雙向通信，具體思路與@類似，不贅述，上圖：
3.指令作用域中的&
主要作用是傳遞一個來自父scope的函數，稍后調用。
1 <!doctype html> 2 <html ng-app="MyModule"> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="../css/bootstrap.css"> 6 </head> 7 <body> 8 <div ng-controller="MyCtrl"> 9 <greeting greet="sayHello(name)"></greeting> 10 <greeting greet="sayHello(name)"></greeting> 11 <greeting greet="sayHello(name)"></greeting> 12 </div> 13 </body> 14 <script src="../js/angular.js"></script> 15 <script src="ScopeAnd.js"></script> 16 </html>
1 var myModule = angular.module("MyModule", []); 2 myModule.controller('MyCtrl', ['$scope', function($scope){ 3 $scope.sayHello=function(name){ 4 alert("Hello "+name); 5 } 6 }]) 7 myModule.directive("greeting", function() { 8 return { 9 restrict:'AE', 10 scope:{ 11 greet:'&' 12 }, 13 template:'<input type="text" ng-model="userName" /><br/>'+ 14 '<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>' 15 } 16 });
從頁面可以看出，這里定義了一個標簽<greeting></greeting>，並在其中定義了屬性名greet，與上面的@以及=不同的是，屬性名后面是一個方法，所以，這里的&主要用於在Controller和directive之間傳遞函數，實現兩者之間的函數通信，在JS中，將前台的greeting標簽替換為template中的內容，一個輸入框加上一個按鈕，按鈕上綁定了greet函數，與前台頁面的greet相呼應，而前台的greet函數在控制器中有定義，所以指令中也是調用的控制器中的greet函數。執行結果如下：
（1）初始界面
（2）在第一個文本框填值
（2）在第二個文本框填值
（3）在第三個文本框填值
補充：關於directive的scope有三種類型，本文沒有給出，具體細節參見8樓@左洸
本文鏈接：《AngularJS入門心得1——directive和controller如何通信》
如果您覺得閱讀本文對您有幫助，請點一下“推薦”按鈕，您的“推薦”將是我最大的寫作動力！如果您想持續關注我的文章，請掃描二維碼，關注JackieZheng的微信公眾號，我會將我的文章推送給您，並和您一起分享我日常閱讀過的優質文章。
