在Angular 1.2以后的版本中，对于嵌套Controller的$scope处理就一直是一个很大的坑，这部分主要得益于JavaScript语言级对继承机制(原型继承)。
本文主要分析Angular对于嵌套Controller作用域的另外一种解决方法，使用controller as 语法进行处理。
上篇为$scope的示例分析,下篇为controller as的示例分析。
$scope的传统写法示例
假设我们在有3个Controller进行嵌套，打印出同一个变量，使用$scope的代码是
controller.js
angular.module('app')
.controller('MainCtrl', function ($scope) {
$scope.title = "第一层";
})
.controller('AnotherCtrl', function ($scope) {
$scope.title = "第二层";
})
.controller('YetAnotherCtrl', function ($scope) {
$scope.title = "第三层";
})
与之对应的view代码则为
view.html
<div ng-controller="MainCtrl">
{{ title }}
<div ng-controller="AnotherCtrl">
{{ title }}
<div ng-controller="YetAnotherCtrl">
{{ title }}
</div>
</div>
</div>
则HTML的页面结果就是
<div ng-controller="MainCtrl" class="ng-scope ng-binding">
第一层
<div ng-controller="AnotherCtrl" class="ng-scope ng-binding">
第二层
<div ng-controller="YetAnotherCtrl" class="ng-scope ng-binding">
第三层
</div>
</div>
</div>
$scope的继承机制
继承
如当第三层的YetAnotherCtrl不在自己的$scope内对title变量做赋值操作，则$scope.title会指向上一层的AnotherCtrl中的$scope中进行调用，这里有一个向上寻找的过程，很类似Java中的多态实现（但只是类似)。
故修改controller.js,注释删除掉内部两个ctrl的赋值语句。
controller.js
angular.module('app')
.controller('MainCtrl', function ($scope) {
$scope.title = "第一层";
})
.controller('AnotherCtrl', function ($scope) {
// $scope.title = "第二层";
})
.controller('YetAnotherCtrl', function ($scope) {
// $scope.title = "第三层";
})
则对应的view输出怎么会变为
<div ng-controller="MainCtrl" class="ng-scope ng-binding">
第一层
<div ng-controller="AnotherCtrl" class="ng-scope ng-binding">
第一层
<div ng-controller="YetAnotherCtrl" class="ng-scope ng-binding">
第一层
</div>
</div>
</div>
YetAnotherCtrl与AnotherCtrl因为在自己的$scope中未对title属性做复制，则会一层一层向父类$scope去调用，最后在MainCtrl中发现了title的并进行调用。
调用父类
回到最初如果3个Ctrl分别对title键值做出了赋值，我们需要显式的在第三层中调用第一层的title值需要怎么做呢？
controller.js
angular.module('app')
.controller('MainCtrl', function ($scope) {
$scope.title = "第一层";
})
.controller('AnotherCtrl', function ($scope) {
$scope.title = "第二层";
})
.controller('YetAnotherCtrl', function ($scope) {
$scope.title = "第三层";
})
view.html
<div ng-controller="MainCtrl">
{{ title }}
<div ng-controller="AnotherCtrl">
{{ title }}
{{$parent.title}}
<div ng-controller="YetAnotherCtrl">
{{ title }}
{{$parent.title}}
</div>
</div>
</div>
我们需要通过$parent去直接操作当前$scope的父$scope去显示其内部的值，根据以上代码则会显示如下的html结果
<div ng-controller="MainCtrl" class="ng-scope ng-binding">
第一层
<div ng-controller="AnotherCtrl" class="ng-scope ng-binding">
第二层 第一层
<div ng-controller="YetAnotherCtrl" class="ng-scope ng-binding">
第三层 第二层
</div>
</div>
</div>
终极版
最后，如果我们去掉第二层的title赋值语句将controller.js改成
angular.module('app')
.controller('MainCtrl', function ($scope) {
$scope.title = "第一层";
})
.controller('AnotherCtrl', function ($scope) {
// $scope.title = "第二层";
})
.controller('YetAnotherCtrl', function ($scope) {
$scope.title = "第三层";
})
那么刚才最终获得HTML会变成什么样呢？
答案是
<div ng-controller="MainCtrl" class="ng-scope ng-binding">
第一层
<div ng-controller="AnotherCtrl" class="ng-scope ng-binding">
第一层 第一层
<div ng-controller="YetAnotherCtrl" class="ng-scope ng-binding">
第三层 第一层
</div>
</div>
</div>
主要原理如下
- 当第三层YetAnotherCtrl调用$scope.title的时候，因为YetAnotherCtrl中又对应的操作故最后获取的是自己所赋值的字符串；
- 当第三层YetAnotherCtrl调用$parent.title。则$parent会先去查找Another中的$scope是否有title值，结果是没有的，故会再向上找，找到MainCtrl中的title值。
- 当第二层AnotherCtrl调用$scope.title的时候，同理因为本身没有故会向上查找；
小结
$scope相当于给所有的controller提供了可继承共享的上下文，很灵活，副作用是不好排错、子类调用父类的代码变得非常的不好理解，并且原型继承天生有很多坑。
相关的文章可见官方一篇介绍$scope的专题:
https://github.com/angular/angular.js/wiki/Understan：ding-Scopes
