zoukankan      html  css  js  c++  java
  • (九)通过几段代码,理清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>



  • 相关阅读:
    TD
    TD
    required
    Cookie
    cookie 与 session区别
    折线图
    <a>标签
    十六进制颜色表
    js获取当前页面的url网址信息
    stopPropagation() 方法
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/5058609.html
Copyright © 2011-2022 走看看