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被定义为JavaScript对象，并以$scope作为参数。
$scope引用使用studentController对象的应用程序。
$scope.student是studentController对象的属性。
firstName和lastName是$scope.student对象的两个属性。我们将默认值传递给他们。
属性fullName是$scope.student对象的功能，该对象返回组合的名称。
在fullName函数中，我们获取了Student对象，然后返回组合名称。
注意，我们还可以在单独的JS文件中定义控制器对象，并在HTML页面中引用该文件。

现在我们可以使用 ng-model 或下面的表达式使用 studentController 的 student 属性:

输入名字: <input type = "text" ng-model = "student.firstName"><br>
输入姓氏: <input type = "text" ng-model = "student.lastName"><br><br>
您正在输入: {{student.fullName()}}

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

在线示例

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

testAngularJS.htm

示例

<html>
   <head>
      <title>AngularJS 控制器</title>
      <script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
      </script>
   </head>
   
   <body>
      <h2>AngularJS 控制器示例</h2>
      
      <div ng-app = "mainApp" ng-controller = "studentController">
         输入名字: <input type = "text" ng-model = "student.firstName"><br>
         <br>
         输入姓氏: <input type = "text" ng-model = "student.lastName"><br>
         <br>
         您正在输入: {{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>

测试看看‹/›

输出结果

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

图片.png

AngularJS 过滤器 AngularJS 表达式

AngularJS 基础教程

AngularJS 控制器

在线示例

testAngularJS.htm