AngularJS入門之心得之directive與controller通訊過程

首頁

web前端

js教程

AngularJS入門之心得之directive與controller通訊過程_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:18 PM

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頁面中，宣告一個標籤，定義一個屬性名稱：water 屬性值：pureWater（這裡的{{}}是angularjs的一個常見表達式，類似於ng-model，用於值綁定）

（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 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

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

See all articles