AngularJS - 控制器

AngularJS 应用主要依赖控制器来控制应用程序中的数据流。控制器使用 `ng-controller` 指令定义。控制器是一个包含属性/特性和函数的 JavaScript 对象。每个控制器都接受 `$scope` 作为参数，它指的是控制器需要处理的应用程序/模块。

<div ng-app = "" ng-controller = "studentController">
   ...
</div>

这里，我们使用 ng-controller 指令声明一个名为 `studentController` 的控制器。我们定义如下：

<script>
   function studentController($scope) {
      $scope.student = {
         firstName: "Mahesh",
         lastName: "Parashar",
         
         fullName: function() {
            var studentObject;
            studentObject = $scope.student;
            return studentObject.firstName + " " + studentObject.lastName;
         }
      };
   }
</script>

`studentController` 定义为一个以 `$scope` 作为参数的 JavaScript 对象。
`$scope` 指的是使用 `studentController` 对象的应用程序。
`$scope.student` 是 `studentController` 对象的一个属性。
`firstName` 和 `lastName` 是 `$scope.student` 对象的两个属性。我们为它们传递默认值。
`fullName` 属性是 `$scope.student` 对象的一个函数，它返回组合后的姓名。
在 `fullName` 函数中，我们获取 `student` 对象，然后返回组合后的姓名。
需要注意的是，我们也可以在单独的 JS 文件中定义控制器对象，并在 HTML 页面中引用该文件。

现在我们可以使用 `ng-model` 或表达式来使用 `studentController` 的 `student` 属性，如下所示：

Enter first name: <input type = "text" ng-model = "student.firstName"><br>
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
<br>
You are entering: {{student.fullName()}}

我们将 `student.firstName` 和 `student.lastName` 绑定到两个输入框。
我们将 `student.fullName()` 绑定到 HTML。
现在，每当您在名字和姓氏输入框中输入任何内容时，您都可以看到全名会自动更新。

示例

以下示例显示了控制器的用法：

testAngularJS.htm

在线演示

<html>
   <head>
      <title>Angular JS Controller</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "studentController">
         Enter first name: <input type = "text" ng-model = "student.firstName"><br>
         <br>
         Enter last name: <input type = "text" ng-model = "student.lastName"><br>
         <br>
         You are entering: {{student.fullName()}}
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Mahesh",
               lastName: "Parashar",
               
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });
      </script>
      
   </body>
</html>

输出

在 Web 浏览器中打开 `testAngularJS.htm` 文件并查看结果。

打印页面