AngularJS 控制器
AngularJS 控制器 **控制** AngularJS 应用程序的数据。
AngularJS 控制器是常规的 **JavaScript 对象**。
AngularJS 控制器
AngularJS 应用程序由控制器控制。
ng-controller 指令定义应用程序控制器。
控制器是一个 **JavaScript 对象**，由标准的 JavaScript **对象构造函数**创建。
AngularJS Example
<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 Example
<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 Example
<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 Example
<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>
自己动手试一试 »
