在angular中 function中的$scope和$rootscope有什么区别

来源：互联网发布：网络剧广告植入编辑：程序博客网时间：2024/05/17 23:40

　scope是angularJS中的作用域(其实就是存储数据的地方)，很类似javascript的原型链。搜索的时候，优先找自己的scope，如果没有找到就沿着作用域链向上搜索，直至到达根作用域rootScope。

　　$rootScope是由angularJS加载模块的时候自动创建的，每个模块只会有1个rootScope。rootScope创建好会以服务的形式加入到 $injector中。也就是说通过 $injector.get("$ rootScope ");能够获取到某个模块的根作用域。更准确的来说，$rootScope是由angularJS的核心模块ng创建的。

　　scope是html和单个controller之间的桥梁，数据绑定就靠他了。rootscope是各个controller中scope的桥梁。用rootscope定义的值，可以在各个controller中使用

示例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也就不是同一个。

示例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>

0 0