$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. 万方数据知识平台 TFHpple +Xpath解析

    试了一下.基本上适合全部的检索结果. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loadi ...

  2. REPLACE...IN.....WITH.... 的使用

    REPLACE...IN.....WITH....   的使用,例子用于改变alv的gt_fieldcat_alv LOOP AT gt_fieldcat_alv ASSIGNING <fs_f ...

  3. 旧版QT的名称：qt-win-commercial-4.4.3-vc60.exe

    qt-win-commercial-4.4.3-vc60.exeqt-vsaddin-collection-2.1.4.exeqt-win-commercial-4.4.3-v2005.exeqt-v ...

  4. Lucene.Net 2.3.1开发介绍 —— 三、索引（一）

    原文:Lucene.Net 2.3.1开发介绍 -- 三.索引(一) 在说索引之前,先说说索引是什么?为什么要索引?怎么索引? 先想想看,假如现在有一个文本,我们会怎么去搜索.比如,有一个string ...

  5. 第二章 IoC Setter注入

    Setter注入又称为属性注入.是通过属性的setXXX()方法来注入Bean的属性值或依赖对象.由于Setter注入具有可选择性和灵活性高的优点,因此Setter注入是实际应用中最常用的注入方式. ...

  6. C/C++中constkeyword

    今天在做一个趋势笔试题的时候.才让我有了系统把constkeyword好好总结一下的冲动,由于这个关键词大大小小好多地方都出现过,出现频率很高,而每次仅仅是简短的把答案看了一下,没有真正将其整个使用方 ...

  7. MySQL 通配符学习总结

    MySQL 通配符 SQL您同意使用模式匹配"_"无论单个字符相匹配,和"%"匹配随意数目字符(包含零个字符). 在 MySQL中.SQL的模式缺省是忽略大写和 ...

  8. 百度搜索结果页url参数详解

    在百度首页输入任意关键词搜索之后,我们跳转到搜索结果页面,在浏览器的网址栏我们可以看到很长的一串url地址.那么,你真的了解这一串url的含义吗? s?:搜索 百度搜索结果页使用了重定向,因此我们看到 ...

  9. #pragma 预处理指令详解

    源地址:http://blog.csdn.net/jx_kingwei/article/details/367312 #pragma  预处理指令详解              在所有的预处理指令中, ...

  10. Infinite scroll has been called autopagerize, unpaginate, endless pages

    http://www.infinite-scroll.com/ Infinite scroll has been called autopagerize, unpaginate, endless pa ...