AngularJS 控制器

AngularJS 控制器控制 AngularJS 应用程序的数据。

AngularJS 控制器是常规的 JavaScript 对象。

AngularJS 控制器

AngularJS 应用程序被控制器控制。

ng-controller 指令定义了应用程序控制器。

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。

控制器的 $scope 是控制器所指向的应用程序/HTML 元素。

AngularJS 实例

<div ng-app="" ng-controller="personController">  

名： <input type="text" ng-model="person.firstName"><br>  
姓： <input type="text" ng-model="person.lastName"><br>  
<br>  
姓名： {{person.firstName + " " + person.lastName}}  

</div>  

<script>  
function personController($scope) {  
    $scope.person = {  
        firstName: "John",  
        lastName: "Doe"  
    };  
}  
</script>

实例讲解：

AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。

ng-controller 指令把控制器命名为 object。

函数 personController 是一个标准的 JavaScript 对象的构造函数。

控制器对象有一个属性：$scope.person。

person 对象有两个属性：firstName 和 lastName。

ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

控制器属性

上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。

控制器也可以把函数作为对象属性：

AngularJS 实例

<div ng-app="" ng-controller="personController">  

名： <input type="text" ng-model="person.firstName"><br>  
姓： <input type="text" ng-model="person.lastName"><br>  
<br>  
姓名： {{person.fullName()}}  

</div>  

<script>  
function personController($scope) {  
    $scope.person = {  
        firstName: "John",  
        lastName: "Doe",  
        fullName: function() {  
            var x;  
            x = $scope.person;  
            return x.firstName + " " + x.lastName;  
        }  
    };  
}  
</script>

控制器方法

控制器也可以带有方法：

AngularJS 实例

<div ng-app="" ng-controller="personController">  

名： <input type="text" ng-model="person.firstName"><br>  
姓： <input type="text" ng-model="person.lastName"><br>  
<br>  
姓名： {{fullName()}}  

</div>  

<script>  
function personController($scope) {  
    $scope.person = {  
        firstName: "John",  
        lastName: "Doe",  
     };  
     $scope.fullName = function() {  
         var x;  
         x = $scope.person;  
         return x.firstName + " " + x.lastName;  
     };  
}  
</script>

外部文件中的控制器

在大型的应用程序中，通常是把控制器存储在外部文件中。

只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可：

AngularJS 实例

<div ng-app="" ng-controller="personController">  

名： <input type="text" ng-model="person.firstName"><br>  
姓： <input type="text" ng-model="person.lastName"><br>  
<br>  
姓名： {{person.firstName + " " + person.lastName}}  

</div>  

<script src="personController.js"></script>

另一个实例

下面的实例我们将创建一个新的控制器文件：

function namesController($scope) {  
    $scope.names = [  
        {name:'Jani',country:'Norway'},  
        {name:'Hege',country:'Sweden'},  
        {name:'Kai',country:'Denmark'}  
    ];  
}

然后在应用程序中使用这个控制器文件：

AngularJS 实例

<div ng-app="" ng-controller="namesController">  

<ul>  
  <li ng-repeat="x in names">  
    {{ x.name + ', ' + x.country }}  
  </li>  
</ul>  

</div>  

<script src="namesController.js"></script>

AngularJS 控制器

AngularJS 控制器