本文實例講述了AngularJS中$injector、$rootScope和$scope的概念和關聯關系。分享給大家供大家參考，具體如下：
$injector、$rootScope和$scope是AngularJS框架中比較重要的東西，理清它們之間的關系，對我們后續學習和理解angularJS框架都非常有用。
1、$injector其實是一個IOC容器，包含了很多服務(類似于spring框架中的bean)，其它代碼能夠通過 $injector.get("serviceName")的方式，從injector中獲取所需要的服務。詳情參考這篇文章：《AngularJS的依賴注入實例分析(使用module和injector)》
2、scope是angularJS中的作用域(其實就是存儲數據的地方)，很類似JavaScript的原型鏈。搜索的時候，優先找自己的scope，如果沒有找到就沿著作用域鏈向上搜索，直至到達根作用域rootScope。
3、$rootScope是由angularJS加載模塊的時候自動創建的，每個模塊只會有1個rootScope。rootScope創建好會以服務的形式加入到$injector中。也就是說通過$injector.get("$rootScope");能夠獲取到某個模塊的根作用域。更準確的來說，$rootScope是由angularJS的核心模塊ng創建的。
示例1：
// 新建一個模塊var module = angular.module("app",[]);// true說明$rootScope確實以服務的形式包含在模塊的injector中var hasNgInjector = angular.injector(['app','ng']);console.log("has $rootScope=" + hasNgInjector.has("$rootScope"));//true// 獲取模塊相應的injector對象,不獲取ng模塊中的服務// 不依賴于ng模塊,無法獲取$rootScope服務var noNgInjector = angular.injector(['app']);console.log("no $rootScope=" + noNgInjector.has("$rootScope"));//false// 獲取angular核心的ng模塊var ngInjector = angular.injector(['ng']);console.log("ng $rootScope=" + ngInjector.has("$rootScope"));//true上面的代碼的確可以說明：$rootScope的確是由核心模塊ng創建的，并以服務的形式存在于injector中。
如果創建injector的時候，指定了ng模塊，那么該injector中就會包含$rootScope服務；否則就不包含$rootScope。
示例2：
<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <script src="angular-1.2.25.js"></script> <script> var module = angular.module("app",[]); // 控制器里的$injector,是由angular框架自動創建的 function FirstController($scope,$injector,$rootScope) { $rootScope.name="aty"; } //自己創建了個injector,依賴于app和ng模塊 var myInjector = angular.injector(["app","ng"]); var rootScope = myInjector.get("$rootScope"); alert(rootScope.name);//udefined </script> </head> <body ng-app="app"> <div id="first" ng-controller="FirstController"> <input type="text" ng-model="name"> <br> {{name}} </div> </body></html>angular.injector()可以調用多次，每次都返回新建的injector對象。所以我們自己創建的myInjector和angular自動創建的$injector不是同一個對象，那么得到的rootScope也就不是同一個。更詳細的可以看另一篇文章《AngularJS的依賴注入實例分析(使用module和injector)》中的angular.injector()相關章節。
示例3：
<!doctype html><html lang="en"> <head> <script src="angular-1.2.25.js"></script> <script> function FirstController($scope,$injector,$rootScope) { // true console.log("scope parent :" + ($scope.$parent ==$rootScope)); } </script> </head> <body ng-app> <div id="first" ng-controller="FirstController"> <input type="text" ng-model="name"> <br> {{name}} </div> </body></html>ng-controller指令給所在的DOM元素創建了一個新的$scope對象,并作為rootScope的子作用域。$scope是由$rootScope創建的，$scope不會包含在$injector中。
示例4：
<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>scope()</title> <script src="jquery-1.11.1.js"></script> <script src="angular-1.2.25.js"></script> <script> //記住rootScope，用來判斷跨控制器是否相等 var first_rootScope = null; //記住scope，用來判斷跨控制器是否相等 var first_scope = null; //記住injector，用來判斷跨控制器是否相等 var first_injectot = null; // 第1個angular控制器 function FirstController($scope,$injector,$rootScope) { $rootScope.name = "aty"; first_rootScope = $rootScope; first_injectot = $injector; first_scope = $scope; } // 第2個angular控制器,主要是來測試跨controller時injector和scope的表現 function SecondController($scope,$injector,$rootScope) { console.log("first_rootScope==second_rootScope:" + (first_rootScope==$rootScope));//true console.log("first_injectot==second_injector:" + (first_injectot==$injector));//true console.log("first_scope==second_scope:" + (first_scope==$scope));//false } </script> </head> <body ng-app> <div id="first" ng-controller="FirstController"> <input type="text" ng-model="name"> <br> <div id="tips"></div> </div> <h2>outside of controller</h2> <br> <!--訪問每一個應用(模塊)的rootScope--> {{$root.name}} <div id="noControllerDiv"/> <div ng-controller="SecondController"> </div> </body></html>ng-app定義了一個angular模塊，每個模塊只有一個$rootScope，只有一個$injector，但可以有多個$scope。
弄清了$injector、$rootScope和$scope這3者之間的關系，我們看下angular提供的2個API，一個是scope()，一個是injector()。使用angular.element()返回的DOM對象，都會包含這2個方法，用來獲取與之關聯的scope和injector。
由于每個模塊的injector是唯一的，所以angular.element().injector()直接返回元素所在模塊的injector。
angular.element().scope()可以獲取到當前元素的scope或父scope。如果當前元素有scope，則返回自己的scope;如果沒有則向父親方向尋找,如果找不到返回rootScope。即返回作用域鏈上，距離該元素最近的scope。
<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>scope()</title> <script src="jquery-1.11.1.js"></script> <script src="angular-1.2.25.js"></script> <script> function FirstController($scope,$injector,$rootScope) { //獲取body對象 var domBody = document.getElementsByTagName('body')[0]; // 通過ng-app指令所在的DOM元素獲取rootScope var rtScope = angular.element(domBody).scope(); //當前元素沒有新作用域,獲取父作用域即rootScope var noScope = angular.element("#noControllerDiv").scope(); // true console.log("rtScope==noScope:" + (rtScope==noScope)); //ng-controller所在的元素,返回的scope var scopeOnController = angular.element("#first").scope(); // ng-controller內部的元素返回所在的scope var inController = angular.element("#tips").scope(); //true console.log("scopeOnController==inController:" + (scopeOnController==inController)); //驗證通過DOM獲取的scope是否與注入的$scope和$rootScope一致 //true console.log("result1:" + (rtScope==$rootScope)); //true console.log("result2:" + (inController==$scope)); } </script> </head> <body ng-app> <div id="first" ng-controller="FirstController"> <input type="text" ng-model="name"> <br> <div id="tips"></div> </div> <h2>outside of controller</h2> <br> <!--訪問每一個應用(模塊)的rootScope--> {{$root.name}} <div id="noControllerDiv"/> </body></html>更多關于AngularJS相關內容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
新聞熱點
疑難解答
