溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關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：
<!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>
<h3>outside of controller</h3>
<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>
<h3>outside of controller</h3>
<br>
<!--訪問每一個應用(模塊)的rootScope-->
{{$root.name}}
<div id="noControllerDiv"/>
</body>
</html>關于“AngularJS中$injector、$rootScope和$scope的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
