AngularJS控制器控制的AngularJS应用的数据 。
AngularJS控制器是常规的JavaScript对象 。
AngularJS控制器
AngularJS应用程序由控制器控制。
吴控制器指令定义了应用程序控制器。
控制器是一个JavaScript对象 ，通过一个标准的JavaScript 对象构造函数创建的 。
AngularJS例
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.firstName
= "John";
$scope.lastName = "Doe";
});
</script>
试一试» 应用解释说：
该AngularJS应用由NG-应用=“对myApp”定义。 该应用程序内的<DIV>运行。
吴控制器=“myCtrl”属性是AngularJS指令。 它定义了一个控制器。
该myCtrl函数是一个JavaScript函数。
AngularJS将调用以$范围对象控制器。
在AngularJS，$范围为应用对象（应用程序变量和函数的所有者）。
该控制器会在范围（firstName和lastName）两个属性（变量）。
在NG-模型绑定指令输入字段到控制器属性（firstName和lastName）。
控制方法
上面的例子展示了一个控制器对象具有两个属性：名字和firstName。
控制器还可以有方法（变量函数）：
AngularJS例
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{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">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</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>
试一试»