(九)通过几段代码，理清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">
<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)
{
// 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中的$injector、$rootScope和$scope的概念和关联关系的更多相关文章
- 一段代码了解Java中char和int的转换
题目要求: 将输入的大写字母转成对应小写的后5个,如A转换后为f:如果转换后大于z则从a重新计,即多出1就转成a,多出2就转成b以此类推. Java代码: ```java private static ...
- 通过一段代码说明C#中rel与out的使用区别
using System; public partial class testref : System.Web.UI.Page { static void outTest(out int x, out ...
- (网页)AngularJS中【Error: [$rootScope:inprog]】的解决办法(转)
转自CSDN: Error: [$rootScope:inprog] http://errors.angularjs.org/1.5.8/$rootScope/inprog?p0=%24apply 如 ...
- AngularJS中【Error: [$rootScope:inprog]】的解决办法
AngularJs脏数据检查冲突 Error: [$rootScope:inprog] http://errors.angularjs.org/1.5.8/$rootScope/inprog?p0=% ...
- 理解angularJS中作用域$scope
angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...
- AngularJS中的控制器和作用域
欢迎大家指导与讨论 : ) 一. 作用域的事件传播 一 . 1 修改的传播 关于作用域最重要的一点是修改会通过事件传播下去,自动更新所以依赖的数据值,即使是通过行为产生的.简而言之,就是即时您只修 ...
- AngularJS中监视Scope变量以及外部调用Scope方法
在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示.有时,也希望通过jQuery调用Scope的某个方法. 比如以下场景: <div> & ...
- 《Focus On 3D Terrain Programming》中一段代码的注释一
取自<Focus On 3D Terrain Programming>中的一段: //--------------------------------------------------- ...
- 怎么知道RTL Schematic中的instance与哪段代码对应呢
2013-06-23 20:15:47 ISE综合后可以看到RTL Schematic,但我们知道在RTL编码时,要经常问自己一个问题“我写的这段代码会综合成什么样的电路呢”.对于一个简单的设计,比如 ...
随机推荐
- leetcode Sum Root to Leaf Numbers(所有路径之和)
转载请注明来自souldak,微博:@evagle 观察题目给的返回值类型是int,可以断定这棵树的高度不会超过10,所以数据量其实是非常小的.那就直接dfs遍历这棵树,然后到叶子节点的时候将值加到最 ...
- 打印org.eclipse.xsd.XSDSchema对象
由于网上关于Eclipse XSD的中文资料比較少,可是有的时候.我们须要使用Eclipse XSD的API去构造或者改动一个XSD文件. 那么当我们创建了org.eclipse.xsd.XSDSch ...
- 分享一些免费的，开源的邮件server软件
因为企业的须要,我们非常可能须要架设一个邮件server,微软的Exchange太复杂?GOOGLE出来的又收费!头大了吧,OK,贾芸斐在这里给大家分享推荐几个免费的开源的邮件server软件.希望你 ...
- HealthKit开发教程Swift版：起步
原文:HealthKit Tutorial with Swift: Getting Started 作者:Ernesto García 译者:Mr_cyz ) HealthKit是iOS 8中的新的A ...
- cocos2dX 事件之触摸事件和触摸事件集合
今天, 我们来学习cocos2dX里面的触摸事件与触摸事件合集, 如今的手机游戏交互基本上都是通过触摸交互的, 所以大家明确这节的重要性了吧, 本节篇幅比較大, 所以我就不扯闲话了 先来看看经常使用函 ...
- linux下安装node.js
1.下载 wget http://nodejs.org/dist/v0.10.32/node-v0.10.32-linux-x64.tar.gz 2.解压 tar -xvf node-v0.10.32 ...
- json转String 和 String转json 和判断对象类型
function ajaxGetMenuList(){ $.getJSON("login.do", function(json){ var r = ""; zN ...
- ubuntu12.10下arm-linux-gcc交叉编译环境的搭建
交叉编译环境搭建的原因:通俗上讲,因为嵌入式系统可用资源比较少:几十M的ARM 二三百M的flash相对我们的pc机来说资源真的没法比.所以,为了解决这种局面就将PC机等作为主机,搭建开发环境,进行编 ...
- Servlet和JSP读书笔记(二)
一. GenericServlet 1. 前面写的 Servlet和JSP学习笔记(一) 中的实例都是通过实现Servlet接口编写的,这样存在的问题就是:你必须实现Servlet中的所有方法,而不管 ...
- 最想做的三个Delphi项目：Paint，IM，SQL，另外还有Smart，TMS，FMX，UML，FreePascal，Python4Delphi，Cheat Engine
都是绝美项目- 如果有时间,要做的项目:0. 整整5个Cloud项目(可带来商业收益,其中还包括手机发送, S/D/N/L/NetDriver)1. Heidi/front/SQLITE STUDIO ...