AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析

本文实例讲述了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）{// trueconsole.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））;//trueconsole.log（"first_injectot==second_injector:" + （first_injectot==$injector））;//trueconsole.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元素获取rootScopevar rtScope = angular.element（domBody）.scope（）;//当前元素没有新作用域,获取父作用域即rootScopevar noScope = angular.element（"#noControllerDiv"）.scope（）;// trueconsole.log（"rtScope==noScope:" + （rtScope==noScope））;//ng-controller所在的元素,返回的scopevar scopeOnController = angular.element（"#first"）.scope（）;// ng-controller内部的元素返回所在的scopevar inController = angular.element（"#tips"）.scope（）;//trueconsole.log（"scopeOnController==inController:" + （scopeOnController==inController））;//验证通过DOM获取的scope是否与注入的$scope和$rootScope一致//trueconsole.log（"result1:" + （rtScope==$rootScope））;//trueconsole.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程序设计有所帮助。