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 = "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 示例
<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 示例
<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>
亲自尝试 »
