通過幾段代碼，理清angularJS中的$injector、$rootScope和$scope的概念和關聯關係，angularjsinjector
$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){// trueconsole.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));//trueconsole.log("first_injectot==second_injector:" + (first_injectot==$injector));//trueconsole.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元素擷取rootScopevar rtScope = angular.element(domBody).scope();//當前元素沒有新範圍,擷取父範圍即rootScopevar noScope = angular.element("#noControllerDiv").scope();// trueconsole.log("rtScope==noScope:" + (rtScope==noScope));//ng-controller所在的元素,返回的scopevar scopeOnController = angular.element("#first").scope();// ng-controller內部的元素返回所在的scopevar inController = angular.element("#tips").scope();//trueconsole.log("scopeOnController==inController:" + (scopeOnController==inController));//驗證通過DOM擷取的scope是否與注入的$scope和$rootScope一致//trueconsole.log("result1:" + (rtScope==$rootScope));//trueconsole.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>
<!doctype html>
<html ng-app="App">
<head>
<script src="angular.js"></script>
</head>
<body>
<form ng-controller="Ctrl">
<input type="radio" ng-model="phone" name="phone" value="Moto">Moto
<input type="radio" ng-model="phone" name="phone" value="Miui">Miui<br>
<button ng-click="check('0')">選擇1</button>
<button ng-click="check('1')">選擇2</button><br>
Value = {{phone || json}}
</form>
</body>
<script>
var appModule = angular.module('App', []);
appModule.controller('Ctrl', function($scope) {
$scope.phone = 'Moto';
$scope.check = function(number) {
if (number == 0) {
$scope.phone = 'Moto';
} else {
$scope.phone = 'Miui';
}
};
});
</script>
</html>
通過js更改輸入框的值，angularjs可以擷取到？我試了下怎不行必須手動更改的才可以擷取
請貼上代碼，光嘴上說沒用
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
