快捷導(dǎo)航

AngularJS中$injector、$rootScope和$scope的概念和關(guān)聯(lián)關(guān)系深入分析

更新時間：2017年01月19日 11:55:07 作者：aitangyong

這篇文章主要介紹了AngularJS中$injector、$rootScope和$scope的概念和關(guān)聯(lián)關(guān)系,結(jié)合實例形式較為深入的分析了$injector、$rootScope和$scope的概念、功能、使用方法及相互之間的關(guān)系,需要的朋友可以參考下

本文實例講述了AngularJS中$injector、$rootScope和$scope的概念和關(guān)聯(lián)關(guān)系。分享給大家供大家參考，具體如下：

$injector、$rootScope和$scope是AngularJS框架中比較重要的東西，理清它們之間的關(guān)系，對我們后續(xù)學(xué)習(xí)和理解angularJS框架都非常有用。

1、$injector其實是一個IOC容器，包含了很多服務(wù)(類似于spring框架中的bean)，其它代碼能夠通過 $injector.get("serviceName")的方式，從injector中獲取所需要的服務(wù)。詳情參考這篇文章：《AngularJS的依賴注入實例分析(使用module和injector)》

2、scope是angularJS中的作用域(其實就是存儲數(shù)據(jù)的地方)，很類似JavaScript的原型鏈。搜索的時候，優(yōu)先找自己的scope，如果沒有找到就沿著作用域鏈向上搜索，直至到達(dá)根作用域rootScope。

3、$rootScope是由angularJS加載模塊的時候自動創(chuàng)建的，每個模塊只會有1個rootScope。rootScope創(chuàng)建好會以服務(wù)的形式加入到$injector中。也就是說通過$injector.get("$rootScope");能夠獲取到某個模塊的根作用域。更準(zhǔn)確的來說，$rootScope是由angularJS的核心模塊ng創(chuàng)建的。

示例1：

// 新建一個模塊
var module = angular.module("app",[]);
// true說明$rootScope確實以服務(wù)的形式包含在模塊的injector中
var hasNgInjector = angular.injector(['app','ng']);
console.log("has $rootScope=" + hasNgInjector.has("$rootScope"));//true
// 獲取模塊相應(yīng)的injector對象,不獲取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的時候，指定了ng模塊，那么該injector中就會包含$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框架自動創(chuàng)建的
    function FirstController($scope,$injector,$rootScope)
    {
      $rootScope.name="aty";
    }
    //自己創(chuàng)建了個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對象。所以我們自己創(chuàng)建的myInjector和angular自動創(chuàng)建的$injector不是同一個對象，那么得到的rootScope也就不是同一個。更詳細(xì)的可以看另一篇文章《AngularJS的依賴注入實例分析(使用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)建了一個新的$scope對象,并作為rootScope的子作用域。$scope是由$rootScope創(chuàng)建的，$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的表現(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>
    <!--訪問每一個應(yīng)用(模塊)的rootScope-->
    {{$root.name}}
    <div id="noControllerDiv"/>
    <div ng-controller="SecondController">
    </div>
  </body>
</html>

ng-app定義了一個angular模塊，每個模塊只有一個$rootScope，只有一個$injector，但可以有多個$scope。

弄清了$injector、$rootScope和$scope這3者之間的關(guān)系，我們看下angular提供的2個API，一個是scope()，一個是injector()。使用angular.element()返回的DOM對象，都會包含這2個方法，用來獲取與之關(guān)聯(lián)的scope和injector。

由于每個模塊的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對象
      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));
      //驗證通過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>
    <!--訪問每一個應(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é)》

希望本文所述對大家AngularJS程序設(shè)計有所幫助。

您可能感興趣的文章: