$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. C++,Python,Go对照学习-02

    main函数         Go中有且只有一个main函数,而且main函数必须在package main当中.main函数无返回值也无参数,如果希望获取从命令行传递的参数有其他包解决这个问题.   ...

  2. ABAP函数:VIEW_MAINTENANCE_CALL(维护表视图等)

    function:VIEW_MAINTENANCE_CALL 功能:维护表视图等 The function module calls the extended table maintenance (V ...

  3. PL/SQL批处理语句（BULK COLLECT子句和FORALL语句）

    Oracle为PL/SQL中的SQL相关功能提供了FORALL语句和BULK COLLECT子句,显著的增强了SQL相关功能.这两个语句一起被称作PL/SQL的批处理语句.Oracle为什么要提供这两 ...

  4. script：查看redo产生的历史信息

    script:查看redo产生的历史信息 SQL> alter session set nls_date_format='dd-mon-yy'; SQL>  set lines 160 p ...

  5. 这里的*号实际表示就是RAC中所有实例都使用

    您的位置: ITPUB个人空间 » cc59的个人空间 » 日志 发布新日志 我的日志我的足迹我的收藏 unix/linuxHA随笔backup&restoreperformance tuni ...

  6. pc机进入android的shell

    一直都知道自己非常死板,刚刚再一次验证了.. 下载下来android开发必备的工具之后,就按部就班的一步步的来了.没想过这些工具有没有其它用处,更有甚者,在刚開始接触android的时候.居然不知道自 ...

  7. OMR数据查询

    查询 1.查询所有的. var query = from p in _Context.Info select p; var query = _Context.Info; 2.单条件查询 等值查 var ...

  8. [C#基础] 类

    类成员 字段和方法是最重要的类成员类型,字段是数据成员,方法是函数成员 字段 字段是隶属于类的变量 它可以是任何类型,无论是预定义类型还是用户定义类型 和所有变量一样,字段用来保存数据 它们可以被写入 ...

  9. Activity组件的生命周期

    一.Activiy组件的三个状态: 1.前台状态(active) : 在屏幕的最上层,页面获得焦点,可以响应用户的操作2.可视状态(paused) : 不能与用户交互,但是还存在于可视区域内,它依然存 ...

  10. IT忍者神龟之Photoshop解析新手抠图的5个高速选择工具

    一:魔棒工具 这是建立选区最简单的方法.但仅仅有在背景色为纯色时才会比較有效. 因此,当要选择的对象的背景为空白背景时.可使用魔棒工具,比如一张产品拍摄图. 在建立选区时,首先,要确保图片在一个图层中 ...