AngularJS入門之心得之directive與controller通訊過程_AngularJS
- WBOY原創
- 2016-05-16 15:18:121400瀏覽
AngularJS 透過新的屬性和表達式擴展了 HTML。 Angularjs學習起來也非常的簡單。
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.指令作用域中的@
作用是把目前屬性當作字串傳遞。
先上程式碼，前台介面：
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-">
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
<drink water="{{pureWater}}"></drink>
</div>
</body>
<script src="../js/angular.js">
<script src="ScopeAt.js"></script>
</html>
JS代碼：
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.pureWater="纯净水";
}])
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
water:'@'
},
template:"<div>{{water}}</div>"
}
});
執行的結果平淡無奇，卻暗藏玄機：
（1） HTML頁面中，宣告一個標籤
（2） JS檔案中，先從模組開始，然後建立一個控制器行2~行4，再定義一個指令，主要實現的是將"
（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中的屬性進行雙向綁定。
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-">
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
Ctrl:
<br>
<input type="text" ng-model="pureWater">
<br>
Directive:
<br>
<drink water="pureWater"></drink>
</div>
</body>
<script src="../js/angular.js"></script>
<script src="ScopeEqual.js"></script>
</html>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.pureWater="纯净水";
}])
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
water:'='
},
template:'<input type="text" ng-model="water"/>'
}
});
這裡=的手段類似，透過頁面設定兩個輸入框，分別代表指令和控制器的作用域，在JS程式碼實現了雙向綁定，做到了控制器與指令在各自作用域內能夠影響對方，也就是雙向通信，具體思路與@類似，不贅述，上圖：
3.指令作用域中的&
主要作用是傳遞一個來自父scope的函數，稍後再呼叫。
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-">
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
<greeting greet="sayHello(name)"></greeting>
<greeting greet="sayHello(name)"></greeting>
<greeting greet="sayHello(name)"></greeting>
</div>
</body>
<script src="../js/angular.js"></script>
<script src="ScopeAnd.js"></script>
</html>
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.sayHello=function(name){
alert("Hello "+name);
}
}])
myModule.directive("greeting", function() {
return {
restrict:'AE',
scope:{
greet:'&'
},
template:'<input type="text" ng-model="userName" /><br/>'+
'<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>'
}
});
As can be seen from the page, a tag b6e6286b014cf648482966f47eced98cc79916d52d53a52cba2c54e4ad4fe6bb is defined here, and the attribute name greet is defined in it. Different from the @ and = above, the attribute name is followed by a method, Therefore, the & here is mainly used to transfer functions between the Controller and the directive to realize function communication between the two. In JS, replace the greeting tag in the front desk with the content in the template, an input box plus a button, The greet function is bound to the button, which echoes the greet function on the front page. The greet function on the front page is defined in the controller, so the greet function in the controller is also called in the instruction. The execution results are as follows:
(1)Initial interface
(2) Fill in the value in the first text box
(2) Fill in the value in the second text box
(3) Fill in the third text box
