控制器在Angular中占有重要的地位，它是组成前端MVC框架的一员。在Angular中，控制器的作用是管理页面的逻辑代码。当控制器通过"ng-controller"指令添加到DOM页面时，Angular将会通过控制器构造函数生成一个实体的对象，而在生成这个对象的过程中，$scope对象作为参数注入其中，并允许用户访问$scope对象。这样一来，用户可以通过$scope对象与页面中的元素进行数据绑定，从而实现数据从控制器到视图层的过程。
1.1控制器初始化$scope对象
例：页面中，以应用模块的方式构建一个控制器对象，并以内联声明方式表明控制器对象依赖于$scope对象提供的服务。在控制器对象中，初始化$scope对象的名为"text"的属性并与页面的<span>元素进行数据绑定
<!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对象添加方法，并依靠这些定义的方法来满足视图层中逻辑处理和事件执行的需求。在添加完$scope对象的方法函数之后，在视图层中，就可以像绑定属性一样，通过表达式的方式绑定这些函数，处理业务逻辑需求，也可以通过Angular的事件处理器，将执行的事件（如ng-click）绑定给这些函数，用来实现事件触发时需要完成的功能需求。
例2：在例1的基础上向$scope对象添加一个名为"span_show"的方法函数。在该函数中，先重置$scope对象的"text"属性值，并通过return方法返回重置后的内容值；在页面中，通过Angular表达式绑定$scope对象中的"span_show"函数，显示重置后返回的内容。
<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的基础上向$scope对象添加一个名为"click_show"的方法，同时，在页面中添加一个<button>元素，并在元素的click事件中绑定该方法。当单击按钮时，在页面的<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 添加带参数的$scope方法
例4：在例3的基础上再向控制器中添加一个名为"click_para"的带参数方法，并再页面中添加一个<button>元素，并将新添方法与元素的"ng-click"事件绑定，这样当单击该元素时，在<span>元素中显示被绑定方法的参数内容。
<div ng-controller="fn">
<span class="show">{{text}}</span>
<button ng-click="click_show()" value="显示">显示</button>
<button ng-click="click_para('点击了带参数的按钮！');">带参数</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对象属性和方法的继承
继承，顾名思义，指的是一种层次级间的延续关系。由于页面本身就是一个具有层次性的DOM结构模型，而Angular中的"ng-controller"指令也允许在不同的层次元素中指定控制器。因此，处于子层控制器中的$scope对象将会自动继承父层控制器中$scope对象的属性和方法
例5：在页面中添加两个具有包含关系的<div>元素，在父级<div>的控制器中添加属性和方法，而将这些属性和方法与子级<div>中的元素相绑定，在子级<div>的<span>元素中显示属性内容，在单击<button>按钮时调用父级控制器中添加的方法。
<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';
}]);
// 最内层的可以继承包含它的所有外层中$scope对象的属性和方法，而最内层控制器中添加的新属性和方法，最外层不能访问。
// 继承是一种由内而外的顺序关系
// 外层的想要访问内层的应该怎么做？？？
</script>
网友评论