這篇文章主要為大家詳細(xì)介紹了AngularJS控制器的使用方法，感興趣的小伙伴們可以參考一下

控制器在Angularjs中的作用是增強(qiáng)視圖，它實(shí)際就是一個(gè)函數(shù)，用來(lái)向視圖中的作用域添加額外的功能，我們用它來(lái)給作用域?qū)ο笤O(shè)置初始狀態(tài)，并添加自定義行為。

當(dāng)我們?cè)陧?yè)面上創(chuàng)建一個(gè)控制器時(shí)，Angularjs會(huì)生成并傳遞一個(gè)$scope給這個(gè)控制器，由于Angularjs會(huì)自動(dòng)實(shí)例化控制器，所以我們只需要寫(xiě)構(gòu)造函數(shù)即可。下面的例子展示了控制器初始化：

function my Controller($scope){

 $scope.msg="hello,world!"; 

}

上面這個(gè)創(chuàng)建控制器的方法會(huì)污染全局命名空間，更合理的辦法是創(chuàng)建一個(gè)模塊，然后在模塊中創(chuàng)建控制器，如下：

var myApp=angular.module("myApp",[]);

myApp.controller("myController",function($scope){

 $scope.msg="hello,world!";

})

用內(nèi)置指令ng-click可以將按鈕、鏈接等其他任何DOM元素同點(diǎn)擊事件進(jìn)行綁定。ng-click指令將瀏覽器中的mouseup事件，同設(shè)置在DOM元素上的事件處理程序綁定在一起（例如，當(dāng)瀏覽器在某個(gè)DOM元素上觸發(fā)了點(diǎn)擊事件，函數(shù)就會(huì)被調(diào)用）。和前面的例子類(lèi)似，綁定看起來(lái)是這樣的：

<div ng-controller="FirstController">

<h4>The simplest adding machine ever</h4>

<button ng-click="add(1)" class="button">Add</button>

<a ng-click="subtract(1)" class="button alert">Subtract</a>

<h4>Current count: {{ counter }}</h4>

</div>

按鈕和鏈接都被綁定在了內(nèi)部$scope的一個(gè)操作上，當(dāng)點(diǎn)擊任何一個(gè)元素時(shí)AngularJS都會(huì)調(diào)用相應(yīng)的方法。注意，當(dāng)設(shè)置調(diào)用哪個(gè)函數(shù)時(shí)，會(huì)同時(shí)用括號(hào)傳遞一個(gè)參數(shù)（add(1)）

app.controller('FirstController', function($scope) {

$scope.counter = 0;

$scope.add = function(amount) { $scope.counter += amount; };

$scope.subtract = function(amount) { $scope.counter -= amount; };

});

Angularjs與其他框架的最大區(qū)別在于，控制器并不適合來(lái)執(zhí)行DOM操作、格式化或數(shù)據(jù)操作，以及除存儲(chǔ)數(shù)據(jù)模型之外的狀態(tài)維護(hù)操作，它只是視圖和$scope之間的橋梁。

控制器嵌套（作用域包含作用域）

AngularJS應(yīng)用的任何一個(gè)部分，無(wú)論它渲染在哪個(gè)上下文中，都有父級(jí)作用域存在。對(duì)于ng-app所處的層級(jí)來(lái)講，它的父級(jí)作用域就是$rootScope。

默認(rèn)情況下，AngularJS在當(dāng)前作用域中無(wú)法找到某個(gè)屬性時(shí)，便會(huì)在父級(jí)作用域中進(jìn)行查找。如果AngularJS找不到對(duì)應(yīng)的屬性，會(huì)順著父級(jí)作用域一直向上尋找，直到抵達(dá)$rootScope為止。如果在$rootScope中也找不到，程序會(huì)繼續(xù)運(yùn)行，但視圖無(wú)法更新。

通過(guò)例子來(lái)看一下這個(gè)行為。創(chuàng)建一個(gè)ParentController，其中包含一個(gè)user對(duì)象，再創(chuàng)建一個(gè)ChildController來(lái)引用這個(gè)對(duì)象：

app.controller('ParentController', function($scope) {

$scope.person = {greeted: false};

});

app.controller('ChildController', function($scope) {

$scope.sayHello = function() {

$scope.person.name = 'Ari Lerner';

};

});

如果我們將ChildController置于ParentController內(nèi)部，那ChildController的$scope對(duì)象的父級(jí)作用域就是ParentController的$scope對(duì)象。根據(jù)原型繼承的機(jī)制，我們可以在子作用域中訪問(wèn)ParentController的$scope對(duì)象。

<div ng-controller="ParentController">

<div ng-controller="ChildController">

<a ng-click="sayHello()">Say hello</a>

</div>

{{ person }}

</div>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，幫助大家熟悉AngularJS控制器。