AngularJS 控制器

AngularJS 控制器控制 AngularJS 應用程序的數據。

AngularJS 控制器是常規的 JavaScript 對象。

AngularJS 控制器

AngularJS 應用程序由控制器控制。

ng-controller 指令定義應用程序控制器。

控制器是由標準的 JavaScript 對象構造器創建的 JavaScript 對象。

AngularJS 實例

<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 = "Bill";  
  $scope.lastName = "Gates";  
});  
</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 實例

<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 = "Bill";  
  $scope.lastName = "Gates";  
  $scope.fullName = function() {  
    return $scope.firstName + " " + $scope.lastName;  
  };  
});  
</script>

親自試一試

外部文件中的控制器

在較大的應用程序中，將控制器存儲在外部文件中是很常見的。

只需將 <script> 標簽之間的代碼復制到一個名為 personController.js 的外部文件中：

AngularJS 實例

<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 實例

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

親自試一試