AngularJS中$injector、$rootScope和$scope的示例分析
这篇文章将为大家详细讲解有关AngularJS中$injector、$rootScope和$scope的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
站在用户的角度思考问题,与客户深入沟通,找到惠民网站设计与惠民网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站制作、做网站、企业官网、英文网站、手机端网站、网站推广、空间域名、网页空间、企业邮箱。业务覆盖惠民地区。
1、$injector其实是一个IOC容器,包含了很多服务(类似于spring框架中的bean),其它代码能够通过 $injector.get("serviceName")的方式,从injector中获取所需要的服务。详情参考这篇文章:《AngularJS的依赖注入实例分析(使用module和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:
{{name}}
angular.injector()可以调用多次,每次都返回新建的injector对象。所以我们自己创建的myInjector和angular自动创建的$injector不是同一个对象,那么得到的rootScope也就不是同一个。更详细的可以看另一篇文章《AngularJS的依赖注入实例分析(使用module和injector)》中的angular.injector()相关章节。
示例3:
{{name}}
ng-controller指令给所在的DOM元素创建了一个新的$scope对象,并作为rootScope的子作用域。$scope是由$rootScope创建的,$scope不会包含在$injector中。
示例4:
scope()
outside of controller
{{$root.name}}
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。
scope()
outside of controller
{{$root.name}}
关于“AngularJS中$injector、$rootScope和$scope的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
网站标题:AngularJS中$injector、$rootScope和$scope的示例分析
文章分享:http://pwwzsj.com/article/jjohhj.html