AngularJS控制器控制的AngularJS應用的數據 。
AngularJS控制器是常規的JavaScript對象 。
AngularJS控制器
AngularJS應用程序由控制器控制。
吳控制器指令定義了應用程序控制器。
控制器是一個JavaScript對象 ，通過一個標準的JavaScript 對象構造函數創建的 。
AngularJS例
<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-應用=“對myApp”定義。 該應用程序內的<DIV>運行。
吳控制器=“myCtrl”屬性是AngularJS指令。 它定義了一個控制器。
該myCtrl函數是一個JavaScript函數。
AngularJS將調用以$範圍對象控制器。
在AngularJS，$範圍為應用對象（應用程序變量和函數的所有者）。
該控制器會在範圍（firstName和lastName）兩個屬性（變量）。
在NG-模型綁定指令輸入字段到控制器屬性（firstName和lastName）。
控制方法
上面的例子展示了一個控制器對象具有兩個屬性：名字和firstName。
控制器還可以有方法（變量函數）：
AngularJS例
<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例
<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例
<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>
試一試»