AngularJS 控制器

AngularJS應(yīng)用程序主要依靠控制器來(lái)控制應(yīng)用程序中的數(shù)據(jù)流。控制器是使用ng-controller指令定義的。控制器是一個(gè)JavaScript對(duì)象，其中包含屬性/屬性和函數(shù)。每個(gè)控制器都接受$scope作為參數(shù)，它表示控制器需要處理的應(yīng)用程序/模塊。

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

在這里，我們使用ng-controller指令聲明一個(gè)名為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對(duì)象，并以$scope作為參數(shù)。
$scope引用使用studentController對(duì)象的應(yīng)用程序。
$scope.student是studentController對(duì)象的屬性。
firstName和lastName是$scope.student對(duì)象的兩個(gè)屬性。我們將默認(rèn)值傳遞給他們。
屬性fullName是$scope.student對(duì)象的功能，該對(duì)象返回組合的名稱。
在fullName函數(shù)中，我們獲取了Student對(duì)象，然后返回組合名稱。
注意，我們還可以在單獨(dú)的JS文件中定義控制器對(duì)象，并在HTML頁(yè)面中引用該文件。

現(xiàn)在我們可以使用 ng-model 或下面的表達(dá)式使用 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 綁定到兩個(gè)輸入框中。
我們將 student.fullName() 綁定到HTML。
現(xiàn)在，無(wú)論何時(shí)在名字和姓氏輸入框中鍵入任何內(nèi)容，您都可以看到全名會(huì)自動(dòng)更新。

在線示例

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

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>

測(cè)試看看?/?

輸出結(jié)果

在網(wǎng)絡(luò)瀏覽器中打開(kāi)文件testAngularJS.htm并查看結(jié)果。

圖片.png

AngularJS 過(guò)濾器 AngularJS 表達(dá)式

AngularJS 基礎(chǔ)教程

AngularJS 控制器

在線示例

testAngularJS.htm