什麼是作用域. 什麼是控制器, 作用域包含了渲染視圖時所需的功能和數據，它是所有視圖的唯一源頭。可以將作用域理解成試圖模型(ViewModel). 作用域之間可以是包含關系也可以是獨立關系.可以通過設置不同的ng-Controller來讓$scope處於不同的作用域下面。
一.$rootScope
1.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/2013-12/94166.htm
在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm
AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm
AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.htm
AngularJS 的詳細介紹：請點這裡
AngularJS 的下載地址：請點這裡
