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)
{
// 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程序设计有所帮助。
上一篇： java实现图片上插入文字并保存
下一篇： JackSon转换