$scope,$injector,$rootScope

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 99 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000003767107

文章标签：

#javascript #ViewUI

本文深入解析AngularJS框架中$injector、$rootScope和$scope的关系，通过实例演示如何使用$injector.get()获取服务，并详细解释了作用域的概念及其查找机制。

$injector、$rootScope和$scope是angularJS框架中比较重要的东西，理清它们之间的关系，对我们后续学习和理解 angularJS 框架都非常有用。
1,$injector.get("serviceName")的方式，从injector中获取所需要的服务。
2,scope是angularJS中的作用域(其实就是存储数据的地方)，很类似javascript的原型链 .angular 查找的时候，优先找自己的scope，如果没有找到就沿着作用域链向上搜索，直至到达根作用域rootScope。
3, $rootScope是由angularJS加载模块的时候自动创建的，每个模块只会有1个rootScope。rootScope创建好会以服务的形式加入到 $injector中。也就是说通过 $injector.get("$ rootScope ");能够获取到某个模块的根作用域。更准确的来说，$rootScope是由angularJS的核心模块ng创建的。

首先将angularjs 和 controller.js引入html

controller.js
var app = angular.module('app', []);
var isInjector = angular.injector(['app','ng']);

加载到chrome以后，打开控制台：
图片描述
回车，结果是 true，说明$rootScope是以服务的形式包含在模块的injector中。

如果你见 ng去掉，代码如下所示:

var app = angular.module('app', []);
var isInjector = angular.injector(['app']);

加载到chrome后，打开控制台:
图片描述
说明不依赖于ng模块,无法从injector中获取$rootScope服务。

再将代码改成如下:

var app = angular.module('app', []);
var isInjector = angular.injector(['ng']);

加载到chrome中，如下所示:
图片描述
获取angular核心的ng模块,结果为true

z综上所述： $rootScope的确是由核心模块ng创建的，并以服务的形式存在于injector中。

如果创建injector的时候，指定了ng模块，那么该injector中就会包含$rootScope服务；相反，如果没有指定ng,就不包含$rootScope服务。