通过几段代码,理清angularJS中的$injector、$rootScope和$scope的概念和关联关系

$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>
时间: 2024-09-30 16:22:47

通过几段代码,理清angularJS中的$injector、$rootScope和$scope的概念和关联关系的相关文章

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

using System; 2 3public partial class testref : System.Web.UI.Page 4{ 5 static void outTest(out int x, out int y) 6 {//离开这个函数前,必须对x和y赋值,否则会报错. 7 //y = x; 8 //上面这行会报错,因为使用了out后,x和y都清空了,需要重新赋值,即使调用函数前赋过值也不行 9 x = 1; 10 y = 2; 11 } 12 static void refTes

AngularJS 中的 Promise 和 设计模式

Promises And Design Patterns 写得好长好长好长长~ 解决 Javascript 异步事件的传统方式是回调函数:调用一个方法,然后给它一个函数引用,当这个方法完结的时候执行这个函数引用. $.get('api/gizmo/42', function(gizmo) { console.log(gizmo); // or whatever }); 看起来很不错对不对,不过,也有缺点的:首先,合并或者链接多个异步过程超复杂:要么就是大量的模板代码,要么就是嗯哼你懂的回调地狱(

AngularJS中的控制器和作用域

欢迎大家指导与讨论 : ) 一. 作用域的事件传播 一 . 1 修改的传播   关于作用域最重要的一点是修改会通过事件传播下去,自动更新所以依赖的数据值,即使是通过行为产生的.简而言之,就是即时您只修改了某个作用域中的某个属性(比如说$scope.data),那么依赖于$scope.data的一些行为(参数含有$scope.data的一些函数),都会重新执行计算.比如下面的这个例子,每当 <input> 被输入不同的对象, getCountry(city) 就会再次计算. <input

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

在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示.有时,也希望通过jQuery调用Scope的某个方法. 比如以下场景: <div> <button id="jQBtn">jQ Button</button> </div> <div id="ngSection" ng-controller="NGCtrl"> <input typ

viewpager 自动无限循环 这段代码移到你的程序中就可以用了

本程序需要懂得viewpager的基础知识,也就是说你能够自己写出一个手动滑动的viewpager,下面我将附带加小圆点的知识 那么我们回顾一下图片轮转的基础知识,如果你已经对viewpager很熟悉了就不用看了,浪费时间 1.viewpager是在v4兼容报里面的,使用控件时请带上报名 2.数据来源用list存放,我这里用的是textview做的小圆点list<textview>,layout做的单张幻灯片list<view>,将xml文件inflate成为view,View.i

用Handler的post()方法来传递线程中的代码段到主线程中执行

自定义的线程中是不能更新UI的,但是如果遇到更新UI的事情,我们可以用handler的post()方法来将更新UI的方法体,直接传送到主线程中,这样就能直接更新UI了.Handler的post()方法就是将Runnable中的代码段传送到主线程. 布局文件就是个textView,我就不贴了. 全部代码 package com.kale.handler; import android.app.Activity; import android.graphics.Color; import andro

c# winform中的一段代码赏析

我遇到了一个bug,是客户测试我们的产品,报出来的,而且有异常信息文件,这对于定位问题,很有帮助. 我找到源码看了下,bug还无法重现.于是我随便点点客户端,经过了几次调试,结果报出错误来了.客户端界面如下: 代码如下: 1 /// <summary> 2 /// 选定项发生改变事件 3 /// </summary> 4 /// <param name="sender"></param> 5 /// <param name=&quo

java中 synchronized 的使用,确保异步执行某一段代码。

最近看了个有关访问网络url和下载的例子,里面有几个synchronized的地方,系统学习下,以下内容很重要,记下来. Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 一.当两个并发线程访问同一个对象object中的这个synchronized(this)同步代码块时,一个时间内只能有一个线程得到执行.另一个线程必须等待当前线程执行完这个代码块以后才能执行该代码块. 二.然而,当一个线程访问object的一个synchroniz

书中一段代码的注释

取自<Focus On 3D Terrain Programming>中的一段: //-------------------------------------------------------------- // Name: CTERRAIN::FilterHeightBand - private // Description: Apply the erosion filter to an individual // band of height values // Arguments: