什么是作用域. 什么是控制器, 作用域包含了渲染视图时所需的功能和数据，它是所有视图的唯一源头。可以将作用域理解成试图模型（ViewModel）. 作用域之间可以是包含关系也可以是独立关系.可以通过设置不同的ng-Controller来让$scope处于不同的作用域下面。一.$rootScope1.1 rootScope可以理解成全局变量,一旦赋值对整个module都有效. rootScpoe不依赖于任何一个controller, app.run是module被加载时候执行的代码. 可以理解成Silverlight MVVM里面的oninit方法.<html>
<script src="angular.min.js"></script>
<script type="text/javascript">
var app = angular.module（"myapp",[]）;
app.run（function（$rootScope）{
$rootScope.message="hello frank！";
}）;
</script>
<head>
<div ng-app="myapp">
<h1>{{ message }}</h1>
</div>
</head>
<body>
</body>
</html>1.2 AngularJS会优先获取Controller中$scope添加的值.代码如下: 分别有三个{message}. testControl2中在$scope中重新赋予了message值.<html>
<script src="angular.min.js"></script>
<script type="text/javascript">
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！";
}）;
</script>
<head>
<div ng-app="myapp">
{{ message }}
<div ng-controller="testControl1">
{{ message }}
</div>
<div ng-controller="testControl2">
{{ message }}
</div>
</div>
</head>
<body>
</body>
</html>运行结果: testControl2下的message被修改了. hello frank！
hello frank！
hello loch！ 二. 控制器（ng-Controller） ng-Controller氛围两种情况一种是包含，另一种是独立. 我们暂且叫做 父子关系和兄弟关系吧. 2.1 父子关系 2.1.1 代码如下:ChildController 包含在了ParentController里面, 两个button都对Count字段进行赋值。<html>
<script src="angular.min.js"></script>
<script type="text/javascript">
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;
}
}）;
</script>
<head>
<div ng-app="myapp">
<div ng-controller="ParentController">
<span>{{ Count }}</span>
<button ng-click="addParent（）">ParentClick</button>
<div ng-controller="ChildController">
<span> {{Count}} </span>
<button ng-click="addChild（）">ChildClick</button>
</div>
</div>
</div>
</head>
<body>
</body>
</html>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独立，自增互不影响. <html>
<script src="angular.min.js"></script>
<script type="text/javascript">
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;
}
}）;
</script>
<head>
<div ng-app="myapp">
<div ng-controller="BrotherOne">
<span>{{ Count }}</span>
<button ng-click="addParent（）">ParentClick</button>
</div>
<div ng-controller="BrotherTwo">
<span> {{ Count }} </span>
<button ng-click="addChild（）">ChildClick</button>
</div>
</div>
</head>
<body>
</body>
</html>三. 本篇总结 A.$rootScope == 全局变量
B.绑定的变量默认先从当前Controller的$scope去取
一些AngularJS相关文章链接：AngularJS权威教程 清晰PDF版 http://www.linuxidc.com/Linux/2015-01/111429.htm希望你喜欢，并分享我的工作~
带你走近AngularJS系列：
- 带你走近AngularJS - 基本功能介绍 http://www.linuxidc.com/Linux/2014-05/102140.htm
- 带你走近AngularJS - 体验指令实例 http://www.linuxidc.com/Linux/2014-05/102141.htm
- 带你走近AngularJS - 创建自定义指令 http://www.linuxidc.com/Linux/2014-05/102142.htm
如何在 AngularJS 中对控制器进行单元测试 http://www.linuxidc.com/Linux/2013-12/94166.htm在 AngularJS 应用中通过 JSON 文件来设置状态 http://www.linuxidc.com/Linux/2014-07/104083.htmAngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htmAngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据 http://www.linuxidc.com/Linux/2014-07/104402.htm
AngularJS 的详细介绍：请点这里
AngularJS 的下载地址：请点这里
本文永久更新链接地址：http://www.linuxidc.com/Linux/2015-06/118577.htm
易网时代-编程资源站