一、背景介绍
AngularJS 控制器是常规的 JavaScript 对象。AngularJS 控制器 控制 AngularJS 应用程序的数据。简单的说：在angularJS中，controller是一个javascript函数/类，用于操作作用域中，各个对象的初始状态以及相应的行为。
二、知识剖析
1.举个例子解释controller的作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="demo">
<div ng-controller="first">
{{name}}
</div>
<p ng-controller="second">
{{name}}
</p>
</body>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
<script>
angular.module("demo",[])
.controller('first',function ($scope) {
$scope.name="胖虎";
})
.controller('second',function ($scope) {
$scope.name="大雄";
})
</script>
</html>
胖虎&大雄
也就是说，在HTML中，绑定ng-controller的那个DOM节点内的所有子标签，将会是当前controller的作用域。在大型项目中,如果HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。
2.多controller的实现
根据上面的例子，我们知道，angularJS中view层解析是通过controller的作用域来将$scope对象解析成相应的内容，因此我们可以在同一个界面上划分不同的模块，通过不同的控制器控制不同的模块来进行开发，这样通过划分模块的开发方式，对今后维护代码带来了便利。
在编码实战中，我将会具体介绍这个问题。
三、常见问题
controller之间的数据该如何传输？
四、解决方案
使用service实现controller之间的数据传输。
在之前的例子我们提到，controller是相对独立的，两个controller之间，内存是不共享的，同级DOM下，两个controller是无法互相访问其中的属性或者方法的。
那么，在实际项目中，我们会有很多的页面和控制器，不同页面下的controller之间有时候是需要传输数据的，之前我们学习了localStorage，用于页面之间的传参。
其实，官方建议页面之间通过service互相访问。
具体内容见 扩展思考。
五、编码实战
在controller中嵌套controller会出现什么样的问题？
首先，我将原来页面中两个控制器所在的div外面又套了一个控制器，添加了1个变量，并将其余两个控制器中的同名变量删除。如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="demo">
<div ng-controller="all">
{{name}}
<div ng-controller="first">
{{name}}
</div>
<p ng-controller="second">
{{name}}
</p>
</div>
</body>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
<script>
angular.module("demo",[])
.controller('first',function ($scope) {
// $scope.name="胖虎";
})
.controller('second',function ($scope) {
// $scope.name="大雄";
})
.controller('all',function ($scope) {
$scope.name="小夫";
})
</script>
</html>
小夫
由此可见，controller的作用域跟js作用域相似。
注意：在大型项目中，为了代码规范，很少会使用这种方法，同时这种行为很危险！
六、扩展思考
如何使用angular中的Service服务在多个controller之间的进行数据传输？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="demo">
<div style="background:#6ddfff;" ng-controller="first">
<button ng-click="change()">更换演员</button><br/>
{{role.name}}<br/>
{{role.sex}}
</div>
<div style="background:#ff7774;" ng-controller="second">
<button ng-click="start()">演出开始</button><br/>
{{role.name}}<br/>
{{role.sex}}
</div>
</body>
<script src="https://cdn.bootcss.com/angular.js/1.6.6/angular.min.js"></script>
<script>
angular.module("demo",[])
.service("demoService",function(){
this.actor={
name:"大雄",
sex:"男"
};
this.actress={
name:"静香",
sex:"女"
}
})
.controller("first",function ($scope,demoService) {
$scope.role=demoService.actor;
$scope.change=function () {
demoService.actor={
name:"胖虎",
sex:"男"
};
$scope.role=demoService.actor;
}
})
.controller("second",function ($scope,demoService) {
$scope.role=demoService.actress;
$scope.start=function () {
$scope.role=demoService.actor;
}
})
</script>
</html>
点击按钮之前：
大雄&静香
先点击“更换演员”：
胖虎&静香
再点击“演出开始”：
胖虎
以上只是简单的使用了service，更多的方法可以自行百度学习下。
七、更多讨论
讨论点一、在开发项目中，如何有效的管理controller和service文件?
讨论点二、创建service还有哪些方式?
八、参考文献
参考一：神奇的angularJS——controller控制器的作用
参考二：神奇的angularJS --连接controller的桥梁 service
网友评论