W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

AngularJS 控制器



AngularJS 控制器控制 AngularJS 应用程序的数据。

AngularJS 控制器是常规的 JavaScript 对象


AngularJS 控制器

AngularJS 应用程序被控制器控制。

ng-controller 指令定义了应用程序控制器。

控制器是一个 JavaScript 对象由标准的 JavaScript 对象的构造函数 创建。

AngularJS Example

<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-app="myApp" 定义。应用程序在 <div> 内运行。

ng-controller="myCtrl" 属性是一个AngularJS指令。它定义了一个控制器。

myCtrl 函数是一个 JavaScript 函数。

AngularJS将使用 $scope 对象调用控制器。

在AngularJS中,$scope 是应用程序对象(应用程序变量和函数的所有者)。

控制器在范围(firstNamelastName)中创建两个属性(变量)。

ng-model 指令将输入字段绑定到控制器属性(firstName和lastName)。


控制器方法

上面的例子演示了一个具有两个属性的控件对象:lastName 和 firstName。

控制器也可以有方法(变量作为函数):

AngularJS Example

<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 Example

<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 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>
尝试一下 »