无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 行业新闻 >

有了小程序之后_AngularJS中$injector、$rootScope和$s

时间:2021-01-12 14:54来源:有了小程序之后 作者:jianzhan 点击:
AngularJS中$injector、$rootScope和$scope的定义和关系关联深层次剖析 本文关键详细介绍了AngularJS中$injector、$rootScope和$scope的定义和关系关联,融合案例方式比较深层次的剖析了$injector、
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析       这篇文章主要介绍了AngularJS中$injector、$rootScope和$scope的概念和关联关系,结合实例形式较为深入的分析了$injector、$rootScope和$scope的概念、功能、使用方法及相互之间的关系,需要的朋友可以参考下

本文实例讲述了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" 
 {{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" 
 {{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" 
 div id="ti凡科抠图" /div 
 /div 
 h2 outside of controller /h2 
 !--访问每一个应用(模块)的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("#ti凡科抠图").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" 
 div id="ti凡科抠图" /div 
 /div 
 h2 outside of controller /h2 
 !--访问每一个应用(模块)的rootScope-- 
 {{$root.name}}
 div id="noControllerDiv"/ 
 /body 
 /html 

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《》及《》

希望本文所述对大家AngularJS程序设计有所帮助。


(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信