控制器(controllers)可以控制应用程序数据
控制器是普通的js对象
使用ng-controller指令定义一个控制器
<div ng-app="myApp" ng-controller="myCtrl">
First name: <input ng-model="firstname">
Last name: <input ng-model="lastname">
<br>
Full name: {{fullname}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('<span style="font-family: Arial, Helvetica, sans-serif;">myCtrl</span>', function ($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
$scope.fullname = $scope.firstname + $scope.lastname;
})
</script>
上述例子解释:
ng-app定义一个应用程序myApp
ng-controller定义一个控制器myCtrl
myCtrl本质上是一个js函数
AngularJS利用$scope对象调用myCtrl这个函数
$scope是整个应用程序所有变量与函数的'拥有者'
控制器在scope对象中创建了三个属性,firstname, lastname, fullname
ng-model将input绑定到控制器三个属性变量
控制器方法:
控制器对象不仅可以创建属性,还可以创建函数,如:
<div ng-app="myApp" ng-controller="ctrl">
First name: <input ng-model="firstname">
Last name: <input ng-model="lastname">
<br>
Full name: {{fullname()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('ctrl', function ($scope) {
$scope.firstname = "John";
$scope.lastname = "Doe";
$scope.fullname = function() {
return $scope.firstname + $scope.lastname;
}
})
</script>