AngularJS控制器用來控制AngularJS applications的數據。

AngularJS控制器就是普通的JavaScript對象。

---

AngularJS控制器

　　AngularJS applications通過控制器進行控制。

　　ng-controller指令定義了一個application的控制器。

　　一個控制器就是一個JavaScript對象，它可以通過標準的JavaScript對象構造函數來創建。

<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 application通過ng-app="myApp"來定義。該application的有效作用域處于ng-app所在的<div>中。

　　ng-controller="myCtrl"屬性即一個AngularJS指令，它定義了一個控制器。

　　myCtrl函數是一個普通的JavaScript函數。

　　AngularJS使用$scope對象來調用控制器。

　　在AngularJS中，$scope是一個application對象（即application變量和函數的所有者）。

　　控制器包含兩個屬性（或者叫變量）：firstName和lastName。它們被附加到$scope對象上。

　　ng-model指令將input標簽的值綁定到控制器的屬性上（firstName和lastName）。

---

控制器的方法

　　上面的例子展示了控制器對象包含兩個屬性：lastName和firstName。

　　控制器也可以包含方法（將函數賦值給變量）：

<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外部文件中：

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

運行

---

另一個例子

　　創建一個新的控制器文件并命名為namesController.js：

angular.module('myApp', []).controller('namesCtrl', function($scope) {$scope.names = [{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]; });

　　然后再application中使用這個控制器文件：

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

運行

http://www.cnblogs.com/jaxu/p/4487781.html

轉載于:https://www.cnblogs.com/dlgood/p/7421967.html

總結

以上是生活随笔為你收集整理的控制器及其中$scope的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。