$scope 和 $rootScope 的区别

Question

谁能解释 $scope 和 $rootScope 之间的区别？

我认为

$范围：

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

$rootScope

通过使用它，我们可以从任何页面获取任何控制器中的所有 ng-model 属性。

这样对吗？ 或者别的什么？

Answer 1

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

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

Answer 2

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

示例：如果在下面的示例中，您将$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>

Answer 3

根据 Angular's Developer's Guide to Scopes ：

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

控制器和指令都引用了作用域，但彼此之间没有引用。 这种安排将控制器与指令以及 DOM 隔离开来。 这一点很重要，因为它使控制器与视图无关，从而大大改善了应用程序的测试故事。

Answer 4

$rootScope全局可用，无论您在哪个控制器中，而$scope仅对当前控制器及其子控制器可用。

Answer 5

换句话说，我们可以看看这个； $rootScope是全局的，而$scope是本地的。 当Controller被分配给一个页面时，这里可以使用$scope变量，因为它绑定到这个控制器。 但是当我们想将它的值共享给其他控制器或服务时，就会使用$rootScope （**有其他方法，我们可以共享值，但在这种情况下我们想使用$rootScope ）。

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

最后有点偏离轨道，请小心使用$rootScope 。 与您使用全局变量的方式类似，调试起来可能会很痛苦，并且您可能会不小心更改计时器内某处的全局变量或使您的阅读不正确的东西。

Answer 6

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

看看这篇文章：

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

Answer 7

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

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

本质上，$rootScope 和 $scope 都标识了 DOM 的特定部分，其中

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

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

$rootScope 应用于作为 Angular 应用程序根元素的 DOM 元素（因此名称为 $rootScope）。 当您将 ng-app 指令添加到 DOM 的元素时，这将成为 $rootScope 可用的 DOM 的根元素。 换句话说， $rootScope 的属性等将在整个 Angular 应用程序中可用。

Angular $scope（及其所有变量和操作）可用于应用程序中 DOM 的特定子集。 具体来说，任何特定控制器的 $scope 可用于应用该特定控制器的 DOM 部分（使用 ng-controller 指令）。 请注意，尽管某些指令（例如 ng-repeat）在应用了控制器的 DOM 部分中应用时，可以创建主范围的子范围——在同一个控制器内——一个控制器不一定只包含一个范围。

如果你在运行你的 Angular 应用程序时查看生成的 HTML，你可以很容易地看到哪些 DOM 元素“包含”了一个范围，因为 Angular 在任何应用了范围的元素（包括根元素）上添加了类 ng-scope的应用程序，它具有 $rootScope）。

顺便说一下，$scope 和 $rootScope 开头的“$”符号只是 Angular 中用于 Angular 保留的内容的标识符。

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

Answer 8

两者都是 Java 脚本对象，区别如下图所示。

非关税壁垒：
第一个 angular 应用程序尝试在 $scope 中查找任何模型或函数的属性，如果在 $scope 中找不到该属性，则它在上层层次结构的父作用域中搜索。 如果在上层层次中仍未找到该属性，则 angular 会尝试在 $rootscope 中解析。

Answer 9

新样式，如John Papa 的 AngularJS Styleguide ，建议我们根本不应该使用$scope来保存当前页面的属性。 相反，我们应该使用controllerAs with vm方法，其中视图绑定到控制器对象本身。 然后在使用 controllerAs 语法时为此使用捕获变量。 选择一致的变量名称，例如 vm，代表 ViewModel。

不过，您仍然需要$scope来查看其观看功能。

$scope 和 $rootScope 的区别

问题描述

$范围：

$rootScope

9 个解决方案

解决方案1
90 2016-02-22 12:08:05

解决方案2
70 2015-07-13 14:52:05

解决方案3
18 2014-04-01 12:57:56

解决方案4
15 2014-04-01 12:50:58

解决方案5
3 2017-03-06 20:19:19

解决方案6
2 2014-04-01 12:56:11

解决方案7
2 2017-04-13 11:28:05

解决方案8
2 2018-05-01 08:15:38

解决方案9
1 2016-10-29 00:19:58

$scope 和 $rootScope 的区别

问题描述

$范围：

$rootScope

9 个解决方案

解决方案1 90 2016-02-22 12:08:05

解决方案2 70 2015-07-13 14:52:05

解决方案3 18 2014-04-01 12:57:56

解决方案4 15 2014-04-01 12:50:58

解决方案5 3 2017-03-06 20:19:19

解决方案6 2 2014-04-01 12:56:11

解决方案7 2 2017-04-13 11:28:05

解决方案8 2 2018-05-01 08:15:38

解决方案9 1 2016-10-29 00:19:58

解决方案1
90 2016-02-22 12:08:05

解决方案2
70 2015-07-13 14:52:05

解决方案3
18 2014-04-01 12:57:56

解决方案4
15 2014-04-01 12:50:58

解决方案5
3 2017-03-06 20:19:19

解决方案6
2 2014-04-01 12:56:11

解决方案7
2 2017-04-13 11:28:05

解决方案8
2 2018-05-01 08:15:38

解决方案9
1 2016-10-29 00:19:58