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

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

标签 injectorrootScopescopeangularjs解惑
6522人阅读 评论(4) 收藏 举报
文章已收录于:
分类

$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,$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,$rootScope)
		{
			$rootScope.name = "aty";
			first_rootScope = $rootScope;
			first_injectot = $injector;
			first_scope = $scope;	
		
		}
		
		// 第2个angular控制器,主要是来测试跨controller时injector和scope的表现
		function SecondController($scope,$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

@H_57_404@<!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,$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 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...