控制器在Angular中占有重要的地位，它是組成前端MVC框架的一員。在Angular中，控制器的作用是管理頁面的邏輯代碼。當(dāng)控制器通過"ng-controller"指令添加到DOM頁面時(shí)，Angular將會(huì)通過控制器構(gòu)造函數(shù)生成一個(gè)實(shí)體的對象，而在生成這個(gè)對象的過程中，$scope對象作為參數(shù)注入其中，并允許用戶訪問$scope對象。這樣一來，用戶可以通過$scope對象與頁面中的元素進(jìn)行數(shù)據(jù)綁定，從而實(shí)現(xiàn)數(shù)據(jù)從控制器到視圖層的過程。
1.1控制器初始化$scope對象
例：頁面中，以應(yīng)用模塊的方式構(gòu)建一個(gè)控制器對象，并以內(nèi)聯(lián)聲明方式表明控制器對象依賴于$scope對象提供的服務(wù)。在控制器對象中，初始化$scope對象的名為"text"的屬性并與頁面的<span>元素進(jìn)行數(shù)據(jù)綁定
<!DOCTYPE html>
<html ng-app="a1">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>控制器初始化$scope對象</h3>
<div ng-controller="fn">
<span>{{text}}</span>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
var mod = angular.module('a1',[]);
mod.controller('fn',['$scope', function ($scope) {
$scope.text='hello world!!!'
}])
</script>
</html>
1.2 添加$scope對象方法
除了可以通過初始化的方式為$scope對象添加屬性之外，還可以為$scope對象添加方法，并依靠這些定義的方法來滿足視圖層中邏輯處理和事件執(zhí)行的需求。在添加完$scope對象的方法函數(shù)之后，在視圖層中，就可以像綁定屬性一樣，通過表達(dá)式的方式綁定這些函數(shù)，處理業(yè)務(wù)邏輯需求，也可以通過Angular的事件處理器，將執(zhí)行的事件（如ng-click）綁定給這些函數(shù)，用來實(shí)現(xiàn)事件觸發(fā)時(shí)需要完成的功能需求。
例2：在例1的基礎(chǔ)上向$scope對象添加一個(gè)名為"span_show"的方法函數(shù)。在該函數(shù)中，先重置$scope對象的"text"屬性值，并通過return方法返回重置后的內(nèi)容值；在頁面中，通過Angular表達(dá)式綁定$scope對象中的"span_show"函數(shù)，顯示重置后返回的內(nèi)容。
<div ng-controller="fn">
<span class="show">{{span_show()}}</span>
</div>
<script src="js/angular.min.js"></script>
<script>
var mod = angular.module('a1',[]);
mod.controller('fn',['$scope', function ($scope) {
$scope.text="hello zyt!!!";
$scope.span_show= function () {
$scope.text="hello angular!!!";
return $scope.text;
}
}]);
1.2.1 在事件中綁定$scope對象的方法
例3：在例2的基礎(chǔ)上向$scope對象添加一個(gè)名為"click_show"的方法，同時(shí)，在頁面中添加一個(gè)<button>元素，并在元素的click事件中綁定該方法。當(dāng)單擊按鈕時(shí)，在頁面的<span>元素中顯示"hello"
<div ng-controller="fn">
<span class="show">{{text}}</span>
<button ng-click="click_show()" value="顯示">顯示</button>
</div>
<script src="js/angular.min.js"></script>
<script>
var mod = angular.module('a2',[]);
mod.controller('fn',['$scope', function ($scope) {
$scope.text='hi';
$scope.click_show= function () {
$scope.text='hello';
}
}]);
</script>
1.2.2 添加帶參數(shù)的$scope方法
例4：在例3的基礎(chǔ)上再向控制器中添加一個(gè)名為"click_para"的帶參數(shù)方法，并再頁面中添加一個(gè)<button>元素，并將新添方法與元素的"ng-click"事件綁定，這樣當(dāng)單擊該元素時(shí)，在<span>元素中顯示被綁定方法的參數(shù)內(nèi)容。
<div ng-controller="fn">
<span class="show">{{text}}</span>
<button ng-click="click_show()" value="顯示">顯示</button>
<button ng-click="click_para('點(diǎn)擊了帶參數(shù)的按鈕！');">帶參數(shù)</button>
</div>
<script src="js/angular.min.js"></script>
<script>
var mod = angular.module('a3',[]);
mod.controller('fn',['$scope', function ($scope) {
$scope.text='hi';
$scope.click_show= function () {
$scope.text='hello';
}
$scope.click_para= function (newVal) {
$scope.text=newVal;
}
}]);
</script>
1.2.3 $scope對象屬性和方法的繼承
繼承，顧名思義，指的是一種層次級(jí)間的延續(xù)關(guān)系。由于頁面本身就是一個(gè)具有層次性的DOM結(jié)構(gòu)模型，而Angular中的"ng-controller"指令也允許在不同的層次元素中指定控制器。因此，處于子層控制器中的$scope對象將會(huì)自動(dòng)繼承父層控制器中$scope對象的屬性和方法
例5：在頁面中添加兩個(gè)具有包含關(guān)系的<div>元素，在父級(jí)<div>的控制器中添加屬性和方法，而將這些屬性和方法與子級(jí)<div>中的元素相綁定，在子級(jí)<div>的<span>元素中顯示屬性內(nèi)容，在單擊<button>按鈕時(shí)調(diào)用父級(jí)控制器中添加的方法。
<div ng-controller="fn">
<div ng-controller="fn_1">
<span>{{text}}</span><br/>
<span>{{child_text}}</span>
<button ng-click="click_show()">繼承</button>
</div>
</div>
<script src="js/angular.min.js"></script>
<script>
var mod = angular.module('a4',[]);
mod.controller('fn',['$scope', function ($scope) {
$scope.text='hi';
$scope.click_show= function () {
$scope.text='hello';
}
}]);
mod.controller('fn_1',['$scope', function ($scope) {
$scope.child_text='angular';
}]);
// 最內(nèi)層的可以繼承包含它的所有外層中$scope對象的屬性和方法，而最內(nèi)層控制器中添加的新屬性和方法，最外層不能訪問。
// 繼承是一種由內(nèi)而外的順序關(guān)系
// 外層的想要訪問內(nèi)層的應(yīng)該怎么做？？？
</script>
