AngularJS 控制器
AngularJS 控制器 **控制** AngularJS 應用程式的資料。
AngularJS 控制器是常規的 **JavaScript 物件**。
AngularJS 控制器
AngularJS 應用程式由控制器控制。
ng-controller 指令定義應用程式控制器。
控制器是一個 **JavaScript 物件**，由標準的 JavaScript **物件建構函式**建立。
AngularJS Example
<div ng-app="myApp" ng-controller="myCtrl">
名字: <input type="text" ng-model="firstName"><br>
姓氏: <input type="text" ng-model="lastName"><br>
<br>
全名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
自己動手試一試 »
應用程式說明
AngularJS 應用程式由 **ng-app="myApp"** 定義。應用程式在 <div> 內執行。
ng-controller="myCtrl" 屬性是 AngularJS 指令。它定義了一個控制器。
myCtrl 函式是一個 JavaScript 函式。
AngularJS 將使用一個 **$scope** 物件來呼叫控制器。
在 AngularJS 中，$scope 是應用程式物件（應用程式變數和函式的擁有者）。
控制器在作用域中建立兩個屬性（變數）：firstName 和 lastName。
ng-model 指令將輸入欄位繫結到控制器屬性（firstName 和 lastName）。
控制器方法
上面的示例演示了一個包含兩個屬性：lastName 和 firstName 的控制器物件。
控制器也可以有方法（函式形式的變數）。
AngularJS Example
<div ng-app="myApp" ng-controller="personCtrl">
名字: <input type="text" ng-model="firstName"><br>
姓氏: <input type="text" ng-model="lastName"><br>
<br>
全名: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
自己動手試一試 »
控制器在外部檔案中
在大型應用程式中，通常將控制器儲存在外部檔案中。
只需將 <script> 標籤之間的程式碼複製到名為 personController.js 的外部檔案中。
AngularJS Example
<div ng-app="myApp" ng-controller="personCtrl">
名字: <input type="text" ng-model="firstName"><br>
姓氏: <input type="text" ng-model="lastName"><br>
<br>
全名: {{fullName()}}
</div>
<script src="personController.js"></script>
自己動手試一試 »
另一個示例
對於下一個示例，我們將建立一個新的控制器檔案。
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
將檔案儲存為 namesController.js
然後在應用程式中使用控制器檔案。
AngularJS Example
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
自己動手試一試 »
