$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. boost.asio包装类st_asio_wrapper开发教程（2014.5.23更新）（一）-----转

    一:什么是st_asio_wrapper它是一个c/s网络编程框架,基于对boost.asio的包装(最低在boost-1.49.0上调试过),目的是快速的构建一个c/s系统: 二:st_asio_w ...

  2. 快速排序算法之我见（附上C代码）

    因为<The C Programming Language>一书中有一个练习,需要用到快速排序,所以又复习了一下,感觉收获颇多,故而分享之. 快速排序的核心是一种 divide and c ...

  3. C++ - Operator Precedence

    The following table lists the precedence and associativity of C++ operators. Operators are listed to ...

  4. Delphi与Vista提供的UAC控制（1-代表资源编号，24-资源类型为RTMAINIFEST，最后用brcc32编译成资源文件）

    Vista提供的UAC机制,是Vista的新增功能之一.它的主要目的是防止对于操作系统本身的恶意修 改.如果想对于Vista的 系统设置进行改动,必须通过UAC的验 证才能够进行.通过这样的手段,大大 ...

  5. 改变Edit的光标（使用CreateCaret，ShowCaret和LoadBitmap三个API函数）

    看着Edit的光标,是不是觉得了无生趣,想不想换个形状来玩玩,其实很简单,且听我道来. Edit是Windows的标准控件,它是一个系统范围窗口类,所以任何应用程序都能创建它.其实Edit本质上也是一 ...

  6. 调整Tomcat的并发线程到5000+

    调整Tomcat的并发线程数到5000+ 1. 调整server.xml的配置 先调整maxThreads的数值,在未调整任何参数之前,默认的并发线程可以达到40. 调整此项后可以达到1800左右. ...

  7. Java泛型之<T>

    这里不讲泛型的概念和基础知识,就单纯的就我的理解说一下泛型中的<T> 一. <T> 下面的一段码就可以简单使用了<T>参数,注释就是对<T>的解释. p ...

  8. ezw证件照芯片压缩算法

    相关网站:http://m.blog.csdn.net/blog/kimwu/12654517 http://blog.sina.com.cn/s/blog_4be751690100bsgb.html ...

  9. Oracle的dbms_output包的put()和put_line()的区别只是有没有回车换行吗?(转)

    答案是否 除了自动添加回车换行外,还有就是缓冲区最大容量的问题!! 无论如何设置serveroutput size,10g里 put() 最多只能输出 32767 个byte 而 put_line() ...

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

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