Scope是AngularJS里的一个很重要的概念，简单的说它就是用来保存AngularJS Model们的对象，是Model们温暖的小家～ 那这个小家是什么时候造的呢？ 1 html ng-app = mainApp 2 / html 我们知道， ng-app 是一个应用启动AngularJS的入口点，在这里也会创建一个r
Scope是AngularJS里的一个很重要的概念，简单的说它就是用来保存AngularJS Model们的对象，是Model们温暖的小家～
那这个小家是什么时候造的呢？
<span>1</span> <span><<span>html</span> <span>ng-app</span>=<span>"mainApp"</span>></span> <span>2</span> <span></<span>html</span>></span>
我们知道， ng-app 是一个应用启动AngularJS的入口点，在这里也会创建一个root
scope，在controller里可以通过 $rootScope 调到，每个应用只能有一个root
scope（当然了～root嘛～），但它会有多个child scope，那啥时候会创建child scope呢？
<span>1</span> <span><<span>html</span> <span>ng-app</span>=<span>"mainApp"</span>></span>
<span>2</span> <span><<span>body</span> <span>ng-controller</span>=<span>"MainCtrl"</span>></span>
<span>3</span> <span><<span>div</span> <span>ng-controller</span>=<span>"SubCtrl"</span> <span>ng-include</span> <span>src</span>=<span>" 'template.html' "</span>></span>
<span>4</span> <span></<span>div</span>></span>
<span>5</span> <span><<span>ul</span>></span>
<span>6</span> <span><<span>li</span> <span>ng-repeat</span>=<span>"item in items"</span>></span>{{item.name}}<span></<span>li</span>></span>
<span>7</span> <span></<span>ul</span>></span>
<span>8</span> <span></<span>body</span>></span>
<span>9</span> <span></<span>html</span>></span>
在上面的例子里， ng-controller ng-include ng-repeat 都创建了新的child
scope（ ng-repeat 是对每一个重复的元素都创建了新的child
scope），他们之间的父子关系是这样的：
包含关系即是他们的父子关系，子scope是可以访问父scope上绑定的所有model和function的。
AngularJS会给scope对应的dom添加叫ng-scope的class，如果我们给自己的应用加这样一个css~
<span>1</span> <span><span>.ng-scope</span> </span><span>{<span><span><span>border</span></span></span><span>:<span><span> <span>2</span>px dotted red</span></span><span>;</span></span><span>}</span></span>通过红色的虚线边框我们也可以看出来大概scope的范围，但注意，并不是所有的ng-scope都是新的scope，有些ng-scope类名对应的dom共享的是同一个scope。
细心的童鞋可能注意到， ng-controller="SubCtrl" 和 ng-include 放在同一个div上了，为啥 ng-controller="SubCtrl" 就是爸爸， ng-include 就是儿子呢？
这个没啥特别的原因， ng-controller 在AngularJS底层代码里实现的比较靠前而已，与在div上标明的顺序无关，但是这时会发生一个问题：
假如在 ng-include 对应的 template.html 里有这样的代码：
template.html
<span>1</span> <span><span><</span></span><span><span><span>input</span> </span><span><span>type</span></span><span>=<span>"text"</span></span><span> <span>ng-model</span></span><span>=<span>"lastName"</span></span> <span>></span></span>
我们会发现，在 ng-controller="SubCtrl" 这个controller里是取不到lastName 的值的。
原因是这样的~
我们假设 ng-controller="SubCtrl" 对应的是 Scope
A ， ng-include 对应的是 Scope
B ~
-
ng-include创建的 Scope B 是ng-controller创建的 Scope A 的子scope，所以在template.html里可以访问 Scope A 的model和function。 - 在
template.html里用ng-model绑定的model，是存放在 Scope B 上的，Scope A 是拿不到的，即使model同名。
解决方案：
- 直接对 Scope A 的model绑定成员对象，如
ng-model="user.lastName" - 或在
template.html使用ng-model绑定model时，加上$parent（取父scope），如：ng-model="$parent.lastName"，这样info就绑定在 Scope A上了
比较推荐第一种方式，因为第一种抽象出了对象，比起第二种所有的model都直接绑在$scope上来，封装的更好~
这里是官方Scope介绍~
