控制器

AngularJS 控制器

AngularJS 應(yīng)用程序由控制器控制。

ng-controller 指令定義應(yīng)用程序控制器。

控制器是由標(biāo)準(zhǔn)的 JavaScript 對(duì)象構(gòu)造器創(chuàng)建的 JavaScript 對(duì)象。

AngularJS 實(shí)例

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

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

應(yīng)用程序說(shuō)明：

AngularJS 應(yīng)用程序由 ng-app="myApp" 定義。應(yīng)用程序在 <div> 內(nèi)運(yùn)行。

ng-controller="myCtrl" 屬性是一個(gè) AngularJS 指令。它定義了一個(gè)控制器。

myCtrl 函數(shù)是一個(gè) JavaScript 函數(shù)。

AngularJS 將使用 $scope 對(duì)象調(diào)用控制器。

在 AngularJS 中，$scope 是應(yīng)用程序?qū)ο螅☉?yīng)用程序變量和函數(shù)的所有者）。

控制器在范圍（firstName 和 lastName）中創(chuàng)建兩個(gè)屬性（變量）。

ng-model 指令將輸入字段綁定到控制器屬性（firstName 和 lastName）。

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

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

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