(九)通过几段代码,理清angularJS中的$injector、$rootScope和$scope的概念和关联关系
来源:互联网 发布:软件项目组织机构图 编辑:程序博客网 时间:2024/04/28 20:35
$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){// trueconsole.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));//trueconsole.log("first_injectot==second_injector:" + (first_injectot==$injector));//trueconsole.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元素获取rootScopevar rtScope = angular.element(domBody).scope();//当前元素没有新作用域,获取父作用域即rootScopevar noScope = angular.element("#noControllerDiv").scope();// trueconsole.log("rtScope==noScope:" + (rtScope==noScope));//ng-controller所在的元素,返回的scopevar scopeOnController = angular.element("#first").scope();// ng-controller内部的元素返回所在的scopevar inController = angular.element("#tips").scope();//trueconsole.log("scopeOnController==inController:" + (scopeOnController==inController));//验证通过DOM获取的scope是否与注入的$scope和$rootScope一致//trueconsole.log("result1:" + (rtScope==$rootScope));//trueconsole.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的概念和关联关系
- 通过几段代码,理清angularJS中的$injector、$rootScope和$scope的概念和关联关系 .
- (九)通过几段代码,理清angularJS中的$injector、$rootScope和$scope的概念和关联关系
- angularJS中的$injector、$rootScope和$scope的概念和关联关系
- AngularJS中的$rootScope和$scope的结构与关系
- angularjs中的$scope和$rootScope
- AngularJS的#rootScope和$scope的作用
- anjular中 function中的$scope和$rootscope的区别
- 2、$scope和$rootScope的作用域
- angularjs scope rootscope 区别
- AnjularJS中$scope和$rootScope的区别小结
- angularjs中的视图和scope
- 理解angular中$rootscope和$scope
- 架构漫谈(九):理清技术、业务和架构的关系
- 架构漫谈(九):理清技术、业务和架构的关系
- 架构漫谈(九):理清技术、业务和架构的关系
- 架构漫谈(九):理清技术、业务和架构的关系
- 架构漫谈(九):理清技术、业务和架构的关系
- Word 2007或Word 2010使用Endnote很卡怎么办?
- NSUserDefaults的同步操作的作用
- system generator使用不完全总结
- java中的面向对象设计原则
- 【扫盲】API、SDK 和 MFC
- (九)通过几段代码,理清angularJS中的$injector、$rootScope和$scope的概念和关联关系
- C++编码规范
- C++ 基类指针指向派生对象/派生类指针指向基类对象
- Git 简易使用指南及补充
- iPhone开发-点击UIWebView的链接地址时,更改链接地址
- 项目1:ItcastOA(4):流程说明:岗位管理分析功能,增删改查
- Android 动画
- 1058 丑数
- 【Android】图灵聊天机器人