$injector、$rootScope和$scope是angularJS框架中比較重要的东西，理清它们之间的关系，对我们兴许学习和理解angularJS框架都很实用。

1、$injector事实上是一个IOC容器。包括了非常多服务(类似于spring框架中的bean)，其他代码可以通过       $injector.get("serviceName")的方式。从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也就不是同一个。更具体的能够看还有一篇文章中的

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中的$injector、$rootScope和$scope的概念和关联关系的更多相关文章

  1. 一段代码了解Java中char和int的转换

    题目要求: 将输入的大写字母转成对应小写的后5个,如A转换后为f:如果转换后大于z则从a重新计,即多出1就转成a,多出2就转成b以此类推. Java代码: ```java private static ...

  2. 通过一段代码说明C#中rel与out的使用区别

    using System; public partial class testref : System.Web.UI.Page { static void outTest(out int x, out ...

  3. (网页)AngularJS中【Error: [$rootScope:inprog]】的解决办法(转)

    转自CSDN: Error: [$rootScope:inprog] http://errors.angularjs.org/1.5.8/$rootScope/inprog?p0=%24apply 如 ...

  4. AngularJS中【Error: [$rootScope:inprog]】的解决办法

    AngularJs脏数据检查冲突 Error: [$rootScope:inprog] http://errors.angularjs.org/1.5.8/$rootScope/inprog?p0=% ...

  5. 理解angularJS中作用域$scope

    angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...

  6. AngularJS中的控制器和作用域

    欢迎大家指导与讨论 : ) 一. 作用域的事件传播 一 . 1 修改的传播   关于作用域最重要的一点是修改会通过事件传播下去,自动更新所以依赖的数据值,即使是通过行为产生的.简而言之,就是即时您只修 ...

  7. AngularJS中监视Scope变量以及外部调用Scope方法

    在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示.有时,也希望通过jQuery调用Scope的某个方法. 比如以下场景: <div> & ...

  8. 《Focus On 3D Terrain Programming》中一段代码的注释一

    取自<Focus On 3D Terrain Programming>中的一段: //--------------------------------------------------- ...

  9. 怎么知道RTL Schematic中的instance与哪段代码对应呢

    2013-06-23 20:15:47 ISE综合后可以看到RTL Schematic,但我们知道在RTL编码时,要经常问自己一个问题“我写的这段代码会综合成什么样的电路呢”.对于一个简单的设计,比如 ...

随机推荐

  1. LA - 4043 - Ants

    题意:n只蚂蚁,n棵树,每只蚂蚁要连一棵树,连线(直线)不能相交,给出n只蚂蚁和n棵树的坐标,输出n只蚂蚁所配对的树的编号(1 <= n <= 100, -10000 <= 坐标x, ...

  2. CorePlot学习

    阅读这篇文章,指出它在国外    原文地址:https://github.com/core-plot/core-plot/wiki/High-Level-Design-Overview 强烈推荐阅读该 ...

  3. 为什么EXE文件出现了不该出现的“盾牌”

    下载了一个小程序,它的功能并不需要管理员权限.但是在Win7下面它的图标上出现了一个“小盾牌”,这意味着运行它需要提升权限……果然,双击时弹出了UAC对话框.用二进制编辑器打开这个EXE,发现它没有内 ...

  4. 14.3.2.3 Consistent Nonlocking Reads 一致性非锁定读

    14.3.2.3 Consistent Nonlocking Reads 一致性非锁定读 一致性读 意味着 InnoDB 使用多版本来保护查询一个数据库在当前时间点的快照. 查询看到被事务做出的修改, ...

  5. IE网页js语法错误2行字符1，FF中正常

    今天开发过程中,突然遇到此奇葩问题,我之前以为是我js打开模态窗体传递的url参数有问题,我使用open没问题.使用模态窗体则会先弹出此错误然后再显示新打开的界面.网上查了许久,总结解决方案如下: 1 ...

  6. RealThinClient学习(一)

    服务端代码: unit RtcHttpServer; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, ...

  7. 使用函数指针和多态代替冗长的if-else或者switch-case

    在编程中,if-else和switch-case是很常见的分支结构,很少在程序中不用这些控制语句.但是不能否认,在一些场景下,由于分支结构过分长,导致代码不美观且不容易维护,在<重构>一书 ...

  8. eclipse设置关联文件打开方式

    window->preferences: General->Editors->File Associations

  9. CSDN编程挑战——《高斯公式》

    高斯公式 题目详情: 高斯在上小学时发明了等差数列求和公式:1+2+..+100=5050.如今问题在于给你一个正整数n,问你他能够表示为多少种连续正整数之和?(自身也算). 输入格式: 多组数据,每 ...

  10. Java 模拟队列(一般队列、双端队列、优先级队列)

    队列: 先进先出,处理类似排队的问题,先排的.先处理,后排的等前面的处理完了,再处理 对于插入和移除操作的时间复杂度都为O(1).从后面插入,从前面移除 双端队列: 即在队列两端都能够insert和r ...