Home » AngularJS 入門教學

[AngularJS]AngularJS 入門教學 - Controller

[ 日期： | 瀏覽：16,255 | 迴響：1 ]
範例 1

在我們的 AngularJS 入門教學 - Hello AngularJS!! 中可以透過輸入方塊來改變我們 ng-model 的值，現在則是要教各位如何透過 JavaScript 改變 ng-model 來觸發雙向綁定的效果。

因為 AngularJS 算是一個 MVC 的框架，所以 HTML 就是 V，而事件的處理就是由 JavaScript 來扮演 C 的角色，至於 M 的話，就是那些跟 ng-model 有關的屬性囉。

先來看這次的 HTML 內容(practice/index.html)：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!doctype html>
<html ng-app>
<head>
	<meta charset="UTF-8">
	<title>男丁格爾's 脫殼玩 - AngularJS</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
</head>
<body>
	<div class="well span6">
		<label>Name:</label>
		<input type="text" placeholder="Enter a name here">
		<br>
		<label>Age:</label>
		<input type="text" placeholder="Enter a number here">
		<hr>
		<h1>男丁格爾</h1>
		<h2>20</h2>
	</div>
</body>
</html>

接的我們先分別幫這兩個輸入框加入值為 name 及 age 的 ng-model 屬性：

檢視原始碼 HTML
1
2
3

<input type="text" ng-model="name" placeholder="Enter a name here">
...
<input type="text" ng-model="age" placeholder="Enter a number here"

還有 h1 及 h2 也加上相對應的表達式：

檢視原始碼 HTML
1
2

<h1>{{ name }}</h1>
<h2>{{ age }}</h2>

存檔後馬上來預覽看看，有沒有發現一開始是都沒有任何內容的，只有當我們在輸入方塊中輸入內容後才會顯示出來：
controller-0

所以接下來就是換 Controller 出場的時刻囉！先讓我們在 div 上加入 ng-controller 屬性，並將值設成為 PersonCtrl。

檢視原始碼 HTML
1
2
3

<div class="well span6" ng-controller="PersonCtrl">
...
</div>

這樣表示在區塊中的 ng-model 都是屬於 PersonCtrl 的管轄範圍。那 Controller 要怎麼做才有辦法控制這些 model 呢？別擔心，一個 Controller 就先當做是一個 function 就好，所以先讓我們新增一個 controller.js 的檔案，然後加入簡單的程式：

檢視原始碼 JavaScript
1
2
3

var PersonCtrl = function($scope){
//...
};

這個 $scope 是個很重要的參數，先把它當做是整個 PersonCtrl 的管轄範圍變數。那還記得嗎？在它的管轄範圍中還有兩個 model：name 及 age，快來看我們怎麼來控制這些 model：

檢視原始碼 JavaScript
1
2
3
4

var PersonCtrl = function($scope){
	$scope.name = '男丁格爾';
	$scope.age = 18;
};

看到了嗎？只要當成在操作物件的方式來使用就可以囉！所以當一開始執行時，就會先被綁定上預設值(別忘了要引用 js/controller.js 喔)：
controller-1

PersonCtrl 會幫我們處理 model 值的改變及綁定，但如果當某個 model 值改變時需要跟 Server 端進行溝通的話，那要怎麼辦呢？這時我們就可以利用 $scope 的 $watch 來監聽指定的 model：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14

var PersonCtrl = function($scope){
	$scope.name = '男丁格爾';
	$scope.age = 18;
 
	$scope.$watch('name', function(){
		console.log($scope.name);
	});
 
	$scope.$watch('age', function(){
		if($scope.age < 18){
			console.error('可能是謊報年齡');
		}
	});
};

筆者這邊針對 name 及 age 來進行監聽的動作，如果 name 有改變的話，就輸出在 console 中；若是 age 小於 18 的話，則輸出可能謊報年齡的訊息。
controller-2

最後，請各位再加入另一個一模一樣的 div 區塊，但指定另一個 Controller 來控制範圍內的 model 吧！

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

1 筆針對 [AngularJS]AngularJS 入門教學 - Controller 的迴響

發表迴響