$ scope和$ rootScope之间的区别

时间:2014-04-01 12:22:01

标签: javascript angularjs

有人可以解释$ scope和$ rootScope之间的区别吗?

我认为

$范围:

  

我们可以使用此功能从特定页面获取特定控制器中的ng-model属性。


$ rootScope

  

我们可以使用此功能从任何页面获取任何控制器中的所有ng-model属性。


这是对的吗?还是其他什么?

9 个答案:

答案 0 :(得分:82)

“$ rootScope”是在网页中创建的所有“$ scope”角对象的父对象。

enter image description here

$ scope是使用ng-controller创建的,而$ rootscope是使用ng-app创建的。

enter image description here

答案 1 :(得分:64)

主要区别在于赋予对象的属性的可用性。分配有$scope的属性不能在定义它的控制器之外使用,而分配有$rootScope的属性可以在任何地方使用。

示例:如果在下面的示例中将$rootScope替换为$scope,则不会从第二个控制器中填充部门属性

angular.module('example', [])
  .controller('GreetController', ['$scope', '$rootScope',
    function($scope, $rootScope) {
      $scope.name = 'World';
      $rootScope.department = 'Angular';
    }
  ])
  .controller('ListController', ['$scope',
    function($scope) {
      $scope.names = ['Igor', 'Misko', 'Vojta'];
    }
  ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="example">
  <div class="show-scope-demo">
    <div ng-controller="GreetController">
      Hello {{name}}!
    </div>
    <div ng-controller="ListController">
      <ol>
        <li ng-repeat="name in names">{{name}} from {{department}}</li>
      </ol>
    </div>
  </div>
</body>

答案 2 :(得分:18)

根据Angular的Developer's Guide to Scopes

  

每个Angular应用程序只有一个根作用域,但可能有多个子作用域。应用程序可以有多个范围,因为某些指令会创建新的子范围(请参阅指令文档以查看哪些指令创建新范围)。创建新范围时,它们将作为其父范围的子项添加。这会创建一个树形结构,与它们所附着的DOM平行。

     

控制器和指令都引用了范围,但没有引用。这种安排将控制器与指令以及DOM隔离开来。这是一个重要的观点,因为它使控制器视图不可知,这极大地改善了应用程序的测试故事。

答案 3 :(得分:13)

$rootScope可在全球范围内使用,无论您使用何种控制器,而$scope仅适用于当前控制器及其子级。

答案 4 :(得分:3)

另一方面,我们可以看看这个; $rootScope是全球性的,$scope是本地的。将Controller分配给页面时,可以在此处使用$scope变量,因为它绑定到此控制器。但是,当我们想要将其价值分享给其他控制器或服务时,正在使用$rootScope(**有其他方式,我们可以共享值,但在这种情况下,我们希望使用$rootScope )。

关于如何定义这两个词的第二个问题是正确的。

最后有点偏离轨道,请谨慎使用$rootScope。与使用全局变量的方式类似,调试很麻烦,您可能会意外地在计时器内某处更改全局变量或者使您的读数不正确。

答案 5 :(得分:2)

每个应用程序至少有一个rootScope,其生命周期与应用程序相同,每个控制器都有自己的范围,不与其他人共享。

看一下这篇文章:

https://github.com/angular/angular.js/wiki/Understanding-Scopes

答案 6 :(得分:2)

我建议您阅读有关范围的官方深入Angular文档。从“范围层次结构”部分开始:

https://docs.angularjs.org/guide/scope

基本上,$ rootScope和$ scope都标识了DOM的特定部分

  • 进行角度操作
  • 声明为$ rootScope或$ scope的一部分的变量可用

任何属于$ rootScope的内容都可以在您的Angular应用程序中全局使用,而属于$ scope的任何内容都可以在该范围适用的DOM部分中使用。

$ rootScope应用于DOM元素,该元素是Angular应用程序的根元素(因此名称为$ rootScope)。将ng-app指令添加到DOM的元素时,这将成为DOM的根元素,$ rootScope可用。换句话说,$ rootScope的属性等将在整个Angular应用程序中可用。

Angular $ scope(及其所有变量和操作)可用于应用程序中DOM的特定子集。具体而言,任何特定控制器的$ scope可用于已应用该特定控制器的DOM部分(使用ng-controller指令)。请注意某些指令,例如ng-repeat,当应用于已应用控制器的DOM的一部分时,可以创建主范围的子范围 - 在同一个控制器中 - 控制器不一定只包含一个范围。

如果您在运行Angular应用时查看生成的HTML,则可以轻松查看哪些DOM元素包含&#39;范围,因为Angular在应用范围的任何元素上添加了类ng范围(包括应用程序的根元素,其中包含$ rootScope)。

顺便说一下,&#39; $&#39;在$ scope的开头签名,$ rootScope只是Angular中的一个标识符,用于Angular保留的内容。

请注意,使用$ rootScope在模块和控制器之间共享变量等通常不被视为最佳实践。 JavaScript开发人员谈论避免污染&#39;通过在那里共享变量的全局范围,因为如果在其他地方使用相同名称的变量,可能会在以后发生冲突,而开发人员没有意识到它已经在$ rootScope上声明了。这种情况的重要性随着应用程序的大小和开发它的团队而增加。理想情况下,$ rootScope将只包含常量或静态变量,这些变量旨在在整个应用程序中始终保持一致。跨模块共享内容的更好方法可能是使用服务和工厂,这是另一个主题!

答案 7 :(得分:2)

两者都是Java脚本对象,差异如下图所示。

enter image description here

<强> NTB:
  第一个角度应用程序试图在$ scope中找到任何模型或函数的属性,如果它没有   在$ scope中找到该属性,然后在上层次结构中的父作用域中搜索。如果属性是   仍然没有在上层次结构中找到,然后angular尝试在$ rootscope中解析。

答案 8 :(得分:1)

新的样式,如John Papa的AngularJS样式指南,暗示我们不应该使用$ scope来保存当前页面的属性。相反,我们应该使用带有vm方法的controllerAs,其中视图绑定到控制器对象本身。然后在使用controllerAs语法时使用捕获变量。选择一致的变量名称,例如vm,它代表ViewModel。 尽管如此,您仍然需要$ scope用于其观看功能。