什么是作用域. 什么是控制器, 作用域包含了渲染视图时所需的功能和数据，它是所有视图的唯一源头。可以将作用域理解成试图模型(ViewModel). 作用域之间可以是包含关系也可以是独立关系.可以通过设置不同的ng-Controller来让$scope处于不同的作用域下面。

一.$rootScope

1.1 rootScope可以理解成全局变量,一旦赋值对整个module都有效. rootScpoe不依赖于任何一个controller,? app.run是module被加载时候执行的代码. 可以理解成Silverlight MVVM里面的oninit方法.

<script src="angular.min.js">
<script type="text/java script">
? ? var app = angular.module('myapp',[]);
? ? app.run(function($rootScope){
? ? ? ? $rootScope.message="hello frank!";
? ? });


? ?

1.2 AngularJS会优先获取Controller中$scope添加的值.

代码如下: 分别有三个{message}.? testControl2中在$scope中重新赋予了message值.

<script src="angular.min.js">
<script type="text/java script">
? ? var app = angular.module('myapp',[]);
? ? app.run(function($rootScope){
? ? ? ? $rootScope.message="hello frank!";
? ? });

? ? app.controller('testControl1',function(){
? ? ? ?
? ? });

? ? app.controller('testControl2',function($scope){
? ? ? ? $scope.message = "hello loch!";
? ? });
? ?


? ?

运行结果:? testControl2下的message被修改了.? ? ? ?

hello frank!
hello frank!
hello loch!

? ? ? ? ? 二. 控制器(ng-Controller)

? ? ? ? ? ? ng-Controller氛围两种情况一种是包含，另一种是独立. 我们暂且叫做 父子关系和兄弟关系吧.

? ? ? ? ? ? 2.1 父子关系

? ? ? ? ? ? 2.1.1 代码如下:ChildController 包含在了ParentController里面, 两个button都对Count字段进行赋值。

<script src="angular.min.js">
<script type="text/java script">
? ? var app = angular.module('myapp',[]);

? ? app.controller('ParentController',function($scope){
? ? ? ? $scope.Count = 1;
? ? ? ? $scope.addParent = function(){
? ? ? ? ? ? $scope.Count+=1;
? ? ? ? }
? ? });

? ? app.controller('ChildController',function($scope){
? ? ? ? // $scope.Count = 1;
? ? ? ? $scope.addChild = function(){
? ? ? ? ? ? $scope.Count+=1;
? ? ? ? }
? ? });
? ?


? ?

2.1.2 运行结果:(在上面demo中,有一串被注释掉的代码,)

A 代码被注解: 当一开始点击ParentClick的时候两个Count一起增加, 然后点击ChildClick的时候只有ChildDiv的Count在增加，然后再回去点击ParentClick的时候,就只有ParentCount在自增

B.代码没被注解: 两者之间的自增都是独立分开的，互补关联.

2.1.3 总结：

因为在AngularJS中会默认先找当前Controller下的值，找不到再去找父类Controller值，如果还找不到就去找rootScope的值,对于A类情况在没点击ChildClick的时候,ChildController还没有设置Count的值，那么对应的Count只有先去取ParentController里面的 scope.count的值. 当点击了ChildClick后，ChildController中的$scope.count被创建，然后两个Controller就此开始独立.

2.2 兄弟关系.?

运行结果: 两个Controller下的Count独立，自增互不影响.? ?

<script src="angular.min.js">
<script type="text/java script">
? ? var app = angular.module('myapp',[]);

? ? app.controller('BrotherOne',function($scope){
? ? ? ? $scope.Count = 1;
? ? ? ? $scope.addParent = function(){
? ? ? ? ? ? $scope.Count+=1;
? ? ? ? }
? ? });

? ? app.controller('BrotherTwo',function($scope){
? ? ? ? $scope.Count = 1;
? ? ? ? $scope.addChild = function(){
? ? ? ? ? ? $scope.Count+=1;
? ? ? ? }
? ? });
? ?


? ?

三. 本篇总结? ? ?

A.$rootScope == 全局变量
B.绑定的变量默认先从当前Controller的$scope去取

一些AngularJS相关文章链接：

希望你喜欢，并分享我的工作~带你走近AngularJS系列：