什么是作用域. 什么是控制器, 作用域包含了渲染視圖時所需的功能和數據，它是所有視圖的唯一源頭。可以將作用域理解成試圖模型(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去取