$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. Oracle死锁、数据库链接问题

    --查询数据库锁表的信息 select do.object_name,t2.username,t2.sid,t2.serial#,t2.logon_time,t2.MACHINE,t2.state,t ...

  2. 适用函数ALSM_EXCEL_TO_INTERNAL_TABLE把excel文件传输到内表中

    FM:ALSM_EXCEL_TO_INTERNAL_TABLE 是上载Excel文件的一个函数,但是这个函数有两个限制. 一是每个CELL只能导入前50个字符,二是如果超过9999行,行号会初始化为从 ...

  3. VC实现文件拖拽OnDropFiles

    文章转自http://blog.csdn.net/zamaolangzi/article/details/5645284 使用过QQ的人都知道,只要把文件拖拽到消息框中就可以传送文件了.那么这种功能是 ...

  4. 数独问题的介绍及POJ 2676-Sudoku（dfs+剪枝）

    知道是数独问题后犹豫了一下要不要做(好像很难的样纸==.),用dfs并剪枝,是一道挺规范的搜索题. 先介绍以下数独吧- 数独(Sudoku)是一种运用纸.笔进行演算的逻辑游戏.玩家需要根据9×9盘面上 ...

  5. c/c++ unix ipc

    c/c++ unix ipc 一个例子 //c_unix.c #include <stdio.h> #include <sys/types.h> #include <sy ...

  6. Suse 创建NFS共享目录

    Suse 创建NFS共享目录 服务端的配置: 1.编辑nfs服务的配置文件 /software/suse11 *(rw,sync,no_root_squash,no_all_squash) 凝视: / ...

  7. 2013Esri全球用户大会之ArcGIS for Desktop

    Q1:ArcGIS 10.2 for Desktop中有哪些新特性?     增强的质量和性能        扩展并行处理能力        许多软件质量的改进        优化的文件处理     ...

  8. maven项目配置Project Facets时further configuration available不出来问题

    如果下边的 further configuration available不出来 把Dynamic web module 去掉勾选,应用与项目,然后再点开项目的properties,再选中Dynami ...

  9. CSS 文本框里添加按钮的实现

    有很多人做界面会经常发现设计师设计出这样的界面: 咋一看是一个文本框里加了一个按钮,经过谷歌之后,未发现在文本框里可以添加按钮. 但可以通过div来实现它. 我的做法是先做一个大小的div,然后用带里 ...

  10. [Android学习笔记]some tips

    集合合并去重: listA.removeAll(listB); listA.addAll(listB); android:singleLine="true"//单行显示 andro ...