首頁 > 開發者 > JavaScript
AngularJS中$injector、$rootScope和$scope的概念和關聯關係深入分析，angularjsinjector
本文執行個體講述了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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
