首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析

Posted in Javascript onJanuary 19, 2017

本文实例讲述了AngularJS中$injector、$rootScope和$scope的概念和关联关系。分享给大家供大家参考，具体如下：

$injector、$rootScope和$scope是AngularJS框架中比较重要的东西，理清它们之间的关系，对我们后续学习和理解angularJS框架都非常有用。

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：

<!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也就不是同一个。更详细的可以看另一篇文章《AngularJS的依赖注入实例分析(使用module和injector)》中的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>

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

AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析

- Author -

aitangyong

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript观察者模式(经典)
Dec 09 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
JavaScript如何一次性展示几万条数据
Mar 30 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 Javascript
javascript实现点击小图显示大图
Nov 29 Javascript
bootstrap组件之导航组件使用方法
Jan 19 #Javascript
bootstrap输入框组件使用方法详解
Jan 19 #Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 #Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 #Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 #Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 #Javascript
学好js，这些js函数概念一定要知道【推荐】
Jan 19 #Javascript
turtle(1) 绘图(1) mysql.user(1) limit(1) Mysql报错(1) 计时器(1) 定时任务(2) MYSQL函数(1) 信号库(1) offset(1)
You might like
php中的时间处理
2006/10/09 PHP
PHP 裁剪图片成固定大小代码方法
2009/09/09 PHP
PHP eval函数使用介绍
2013/12/08 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
PHP实现添加购物车功能
2017/03/06 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
javascript中的原型链深入理解
2014/02/24 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
用原生js做单页应用
2017/01/17 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
Python3多线程基础知识点
2019/02/19 Python
基于Python绘制个人足迹地图
2020/06/01 Python
Django websocket原理及功能实现代码
2020/11/14 Python
大客户销售经理职责
2013/12/04 职场文书
大学团支书的自我评价分享
2013/12/14 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
会议主持词
2014/03/17 职场文书
爱国演讲稿400字
2014/05/07 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL