首页 > 代码库 > 4.控制器
4.控制器
1.概述
AngularJS 中的控制器是一个函数，用来给视图的作用域添加额外的功能，我们用它来给作用域对象设置初始状态，并添加自定义行为。
当在页面上创建一个新的控制器时，AngularJS 会生成并传递一个新的$scope 给这个controller，可以在这个controller 里初始化$scope。AngularJS会自动实例化controller，我们只需编写构造函数即可。
不建议在全局作用域中创建controller, 否则会污染全局命名空间。合理的做法是创建一个模块，然后在模块中创建控制器。如下所示：
//不建议在全局作用域中创建控制器函数，高版本的AngularJS 已经不能这样使用
//function FirstController($scope){
// $scope.message="Hello";
//}
//创建一个模块，在模块中创建控制器
var app = angular.module("MyApp",[]);
app.controller("FirstController",function($scope){
$scope.message="Hello";
});
用内置指令ng-click 可以将按钮、链接等其他元素同点击事件进行绑定。
<div ng-controller="FirstController">
<h4>The simplest adding machine ever</h4>
<button ng-clikck="add(1)" class="button"></button>
<a ng-click="Substract(1)">Substract</a>
<h4>Current count:{{counter}}</h4>
</div>
<script>
app.controller("FirstController",function($scope){
$scope.counter=0;
$scope.add=function(amount){
$scope.counter += amount;
};
$scope.Substract(amount){
$scope.counter -= amount;
};
});
</script>
用这种方式可以在视图中调用add() 或substract() 方法，这两个方法可以定义在FirstController 的作用域中，或父级$scope 中。
AngularJS 同其他JavaScript 框架最大的区别是，控制器并不适合用来执行DOM 操作、格式化或数据操作，或者除存储数据模型之外的状态维护操作。它只是视图和$scope 之间的桥梁。设计良好的应用会将复杂的逻辑放到指令和服务中。通过使用指令和服务，我们可以将控制器重构成一个轻量且更易维护的形式。
AngularJS 允许在$scope 上设置包括对象在内的任何类型的数据，并且可以在视图中展示对象的属性。
2.控制器嵌套
即作用域包含作用域，AngularJS应用的任何一个部分，无论它渲染在哪个上下文中，都有父级作用域存在。对ng-app 所处的层级来讲，它的父级作用域就是$rootScope。
默认情况下，AngularJS 在当前作用域中无法找到某个属性时，便会在父级作用域中进行查找。如果找不到对应的属性，会顺着父级作用域一直向上查找，直到$rootScope 为止。如果在$rootScope中仍找不到，程序会继续运行，但视图无法更新。
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say Hello</a>
</div>
{{person}}
</div>
<script>
app.controller("ParentController",function($scope){
$scope.person = {greeted: false};
});
app.controller("ChildController",function($scope){
$scope.sayHello=function(){
$scope.person.name = ‘Jack‘;
};
});
</script>
4.控制器