AngularJS 控制器

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="http://caibaojian.com/angularjs/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="http://caibaojian.com/angularjs/namesController.js"></script>