AngularJS入門心得之directive和controller通信過程

更新時間：2016年01月25日 14:29:37 投稿：mrr

Angular JS (Angular.JS) 是一組用來開發(fā)Web頁面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件，接下來通過本文給大家介紹AngularJS入門心得之directive和controller通信過程，對angularjs相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧

AngularJS 通過新的屬性和表達(dá)式擴(kuò)展了 HTML。Angularjs學(xué)習(xí)起來也非常的簡單。

1.AngularJS是何方神圣

Angular JS (Angular.JS) 是一組用來開發(fā)Web頁面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件。它支持整個開發(fā)進(jìn)程，提供web應(yīng)用的架構(gòu)，無需進(jìn)行手工DOM操作。

AngularJS是為了克服HTML在構(gòu)建應(yīng)用上的不足而設(shè)計的。HTML是一門很好的為靜態(tài)文本展示設(shè)計的聲明式語言，但要構(gòu)建WEB應(yīng)用的話它就顯得乏力了。這里AngularJS就應(yīng)運而生，彌補(bǔ)了HTML的天然缺陷，用于構(gòu)件Web應(yīng)用等。

2.如何了解AngularJS

AngularJS誕生于2009年,由Misko Hevery 等人創(chuàng)建,后為Google所收購。

AngularJS官網(wǎng) ： http://www.angularjs.org （一般來說會被墻掉，所以可以訪問下面的網(wǎng)站）

AngularJS中文網(wǎng)站： http://www.ngnice.com

書籍：《AngularJS 權(quán)威教程》《用AngularJS開發(fā)下一代Web應(yīng)用》等。個人意見，F(xiàn)or your information

備注：視頻教程，最近有看過大漠老師的AngularJS教程，覺得還不錯，但是感覺沒有一點基礎(chǔ)還是聽不懂的，或者要看好幾遍（不是做廣告）

3.為什么要了解AngularJS

一項新技術(shù)能夠面世，為眾人所知，從而脫引而出，定然不是空穴來風(fēng)，肯定有其標(biāo)新立異的過人之處，主要有以下幾點：

（1）MVC的思想（或者是MVVM）

（2）模塊化和依賴注入

（3）雙向數(shù)據(jù)綁定

（4）指令

每一個特性都可以大篇幅的展開，顯然，目前能力不夠，沒法展開，有興趣可以網(wǎng)上搜下，大體了解。

今天主要來說說AngularJS的三個指令“ @ ”，“ = ”，“ & ”的用法和區(qū)別（這個問題困擾了我大半天，和Frank交流多次，我才明白）

1.指令作用域中的@

作用是把當(dāng)前屬性作為字符串傳遞。

先上代碼，前臺界面：

<!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>"
}
});

執(zhí)行的結(jié)果平淡無奇，卻暗藏玄機(jī)：

（1） HTML頁面中，聲明一個標(biāo)簽<drink></drink>，其中定義一個屬性名：water 屬性值：pureWater（這里的{{}}是angularjs的一種常見表達(dá)式，類似于ng-model，用于值綁定）

（2） JS文件中，首先從模塊開始，然后創(chuàng)建一個控制器行2~行4，再定義一個指令，主要實現(xiàn)的是將"<drink></drink>"替換為"<div>{{water}}</div>"標(biāo)簽顯示

（3）重點介紹這里的

scope:{
water:'@'
}

該表達(dá)式等價于：

link:function(scope,element,attrs){
scope.water=attrs.water;
}

具體含義就是在指令的scope上定義一個屬性名：water，它的值就是前臺界面中water屬性的值，也就是"{{pureWater}}";

同時{{pureWater}}的值我們從聲明的控制器可以看出：

$scope.pureWater="純凈水";

所以最終頁面顯示的是“純凈水”，主要的流程就是：

a.在指令中，通過@實現(xiàn)指令與HTML頁面元素關(guān)聯(lián);

b.在控制器中又實現(xiàn)了與頁面的聯(lián)系;

c.從而借助HTML頁面建立起控制器與指令的聯(lián)系，也是一種通訊方式。

具體見下圖：

2.指令作用域中的=

作用是與父scope中的屬性進(jìn)行雙向綁定。

<!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"/>'
}
});

這里=的手段類似，通過頁面設(shè)置兩個輸入框，分別代表指令和控制器的作用域，在JS代碼實現(xiàn)了雙向綁定，做到了控制器與指令在各自作用域內(nèi)能夠影響對方，也就是雙向通信，具體思路與@類似，不贅述，上圖：

3.指令作用域中的&

主要作用是傳遞一個來自父scope的函數(shù)，稍后調(diào)用。

<!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/>'
}
});

從頁面可以看出，這里定義了一個標(biāo)簽<greeting></greeting>，并在其中定義了屬性名greet，與上面的@以及=不同的是，屬性名后面是一個方法，所以，這里的&主要用于在Controller和directive之間傳遞函數(shù)，實現(xiàn)兩者之間的函數(shù)通信，在JS中，將前臺的greeting標(biāo)簽替換為template中的內(nèi)容，一個輸入框加上一個按鈕，按鈕上綁定了greet函數(shù)，與前臺頁面的greet相呼應(yīng)，而前臺的greet函數(shù)在控制器中有定義，所以指令中也是調(diào)用的控制器中的greet函數(shù)。執(zhí)行結(jié)果如下：

（1）初始界面