AngularJS中$injector、$rootScope和$scope的概念和關(guān)聯(lián)關(guān)系深入分析
本文實(shí)例講述了AngularJS中$injector、$rootScope和$scope的概念和關(guān)聯(lián)關(guān)系。分享給大家供大家參考，具體如下：
$injector、$rootScope和$scope是AngularJS框架中比較重要的東西，理清它們之間的關(guān)系，對(duì)我們后續(xù)學(xué)習(xí)和理解angularJS框架都非常有用。
1、$injector其實(shí)是一個(gè)IOC容器，包含了很多服務(wù)(類似于spring框架中的bean)，其它代碼能夠通過 $injector.get("serviceName")的方式，從injector中獲取所需要的服務(wù)。詳情參考這篇文章：《AngularJS的依賴注入實(shí)例分析(使用module和injector)》
2、scope是angularJS中的作用域(其實(shí)就是存儲(chǔ)數(shù)據(jù)的地方)，很類似JavaScript的原型鏈。搜索的時(shí)候，優(yōu)先找自己的scope，如果沒有找到就沿著作用域鏈向上搜索，直至到達(dá)根作用域rootScope。
3、$rootScope是由angularJS加載模塊的時(shí)候自動(dòng)創(chuàng)建的，每個(gè)模塊只會(huì)有1個(gè)rootScope。rootScope創(chuàng)建好會(huì)以服務(wù)的形式加入到$injector中。也就是說通過$injector.get("$rootScope");能夠獲取到某個(gè)模塊的根作用域。更準(zhǔn)確的來說，$rootScope是由angularJS的核心模塊ng創(chuàng)建的。
示例1：
// 新建一個(gè)模塊
var module = angular.module("app",[]);
// true說明$rootScope確實(shí)以服務(wù)的形式包含在模塊的injector中
var hasNgInjector = angular.injector(['app','ng']);
console.log("has $rootScope=" + hasNgInjector.has("$rootScope"));//true
// 獲取模塊相應(yīng)的injector對(duì)象,不獲取ng模塊中的服務(wù)
// 不依賴于ng模塊,無法獲取$rootScope服務(wù)
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創(chuàng)建的，并以服務(wù)的形式存在于injector中。
如果創(chuàng)建injector的時(shí)候，指定了ng模塊，那么該injector中就會(huì)包含$rootScope服務(wù)；否則就不包含$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框架自動(dòng)創(chuàng)建的
function FirstController($scope,$injector,$rootScope)
{
$rootScope.name="aty";
}
//自己創(chuàng)建了個(gè)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()可以調(diào)用多次，每次都返回新建的injector對(duì)象。所以我們自己創(chuàng)建的myInjector和angular自動(dòng)創(chuàng)建的$injector不是同一個(gè)對(duì)象，那么得到的rootScope也就不是同一個(gè)。更詳細(xì)的可以看另一篇文章《AngularJS的依賴注入實(shí)例分析(使用module和injector)》中的angular.injector()相關(guān)章節(jié)。
示例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元素創(chuàng)建了一個(gè)新的$scope對(duì)象,并作為rootScope的子作用域。$scope是由$rootScope創(chuàng)建的，$scope不會(huì)包含在$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個(gè)angular控制器
function FirstController($scope,$injector,$rootScope)
{
$rootScope.name = "aty";
first_rootScope = $rootScope;
first_injectot = $injector;
first_scope = $scope;
}
// 第2個(gè)angular控制器,主要是來測(cè)試跨controller時(shí)injector和scope的表現(xiàn)
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>
<!--訪問每一個(gè)應(yīng)用(模塊)的rootScope-->
{{$root.name}}
<div id="noControllerDiv"/>
<div ng-controller="SecondController">
</div>
</body>
</html>
ng-app定義了一個(gè)angular模塊，每個(gè)模塊只有一個(gè)$rootScope，只有一個(gè)$injector，但可以有多個(gè)$scope。
弄清了$injector、$rootScope和$scope這3者之間的關(guān)系，我們看下angular提供的2個(gè)API，一個(gè)是scope()，一個(gè)是injector()。使用angular.element()返回的DOM對(duì)象，都會(huì)包含這2個(gè)方法，用來獲取與之關(guān)聯(lián)的scope和injector。
由于每個(gè)模塊的injector是唯一的，所以angular.element().injector()直接返回元素所在模塊的injector。
angular.element().scope()可以獲取到當(dāng)前元素的scope或父scope。如果當(dāng)前元素有scope，則返回自己的scope;如果沒有則向父親方向?qū)ふ?如果找不到返回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對(duì)象
var domBody = document.getElementsByTagName('body')[0];
// 通過ng-app指令所在的DOM元素獲取rootScope
var rtScope = angular.element(domBody).scope();
//當(dāng)前元素沒有新作用域,獲取父作用域即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內(nèi)部的元素返回所在的scope
var inController = angular.element("#tips").scope();
//true
console.log("scopeOnController==inController:" + (scopeOnController==inController));
//驗(yàn)證通過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>
<!--訪問每一個(gè)應(yīng)用(模塊)的rootScope-->
{{$root.name}}
<div id="noControllerDiv"/>
</body>
</html>
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要介紹了AngularJS 單元測(cè)試（一）詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
基于Angular中ng-controller父子級(jí)嵌套的相關(guān)屬性詳解
今天小編就為大家分享一篇基于Angular中ng-controller父子級(jí)嵌套的相關(guān)屬性詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10
angularjs中ng-bind-html的用法總結(jié)
這篇文章主要介紹了angularjs中ng-bind-html的用法總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了Angular2 多級(jí)注入器詳解的相關(guān)資料,并附簡(jiǎn)單實(shí)例代碼，需要的朋友可以參考下2016-10-10
AngularJs實(shí)現(xiàn)分頁功能不帶省略號(hào)的代碼
這篇文章主要介紹了AngularJs實(shí)現(xiàn)分頁功能不帶省略號(hào)的代碼的相關(guān)資料，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-05-05
這篇文章主要介紹了Angular7.2.7路由使用初體驗(yàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
在 Angular 中使用Chart.js 和 ng2-charts的示例代碼
本篇文章主要介紹了在 Angular 中使用Chart.js 和 ng2-charts的示例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
詳解angular路由高亮之RouterLinkActive
這篇文章主要介紹了詳解angular路由高亮之RouterLinkActive，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
angularjs2 ng2 密碼隱藏顯示的實(shí)例代碼
本篇文章主要介紹了angularjs2 ng2 密碼隱藏顯示的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
AngularJS中實(shí)現(xiàn)用戶訪問的身份認(rèn)證和表單驗(yàn)證功能
這篇文章主要介紹了AngularJS中實(shí)現(xiàn)用戶訪問的身份認(rèn)證及表單驗(yàn)證功能的方法,Angular是Google開發(fā)的一款瀏覽器端的高人氣JavaScript框架,需要的朋友可以參考下2016-04-04