$scope 和 $rootScope 的区别
[英]Difference between $scope and $rootScope
问题描述
Can anyone explain the difference between $scope and $rootScope?
谁能解释 $scope 和 $rootScope 之间的区别？
I think我认为
$scope: $范围：
We can get ng-model properties in particular controller from the particular page by using this.
$rootScope $rootScope
We can get all ng-model properties in any controller from any page by using this.
Is this correct?这样对吗？ Or anything else?或者别的什么？
9 个解决方案
解决方案1
90 2016-02-22 12:08:05
"$rootScope” is a parent object of all “$scope” angular objects created in a web page. “$rootScope”是在网页中创建的所有“$scope”角度对象的父对象。
$scope is created with ng-controller while $rootscope is created with ng-app . $scope 是用ng-controller创建的，而 $rootscope 是用ng-app创建的。
解决方案2
70 2015-07-13 14:52:05
The main difference is the availability of the property assigned with the object.主要区别在于分配给对象的属性的可用性。 A property assigned with $scope cannot be used outside the controller in which it is defined whereas a property assigned with $rootScope can be used anywhere.用$scope分配的属性不能在定义它的控制器之外使用，而用$rootScope分配的属性可以在任何地方使用。
Example: If in the example below you replace $rootScope with $scope the department property will not be populated from the first controller in the second one示例：如果在下面的示例中，您将$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>
解决方案3
18 2014-04-01 12:57:56
According to Angular's Developer's Guide to Scopes :根据 Angular's Developer's Guide to Scopes ：
Each Angular application has exactly one root scope, but may have several child scopes.
Both controllers and directives have reference to the scope, but not to each other.
解决方案4
15 2014-04-01 12:50:58
$rootScope全局可用，无论您在哪个控制器中，而$scope仅对当前控制器及其子控制器可用。
解决方案5
3 2017-03-06 20:19:19
In other way we can look at this;换句话说，我们可以看看这个； $rootScope is global while $scope is local. $rootScope是全局的，而$scope是本地的。 When Controller is assigned to a page, so a $scope variable can be use here because it binds to this controller.当Controller被分配给一个页面时，这里可以使用$scope变量，因为它绑定到这个控制器。 But when we want to share its value across to other controllers or services, then $rootScope is being used (**there are alternative ways, we can share values across but in this case we want to use $rootScope ).但是当我们想将它的值共享给其他控制器或服务时，就会使用$rootScope （**有其他方法，我们可以共享值，但在这种情况下我们想使用$rootScope ）。
Your second question about how you define those two words are correct.关于如何定义这两个词的第二个问题是正确的。
Lastly a bit off track, please use $rootScope with care.最后有点偏离轨道，请小心使用$rootScope 。 Similar to the way you use global variables, can be a pain to debug and you may accidentally change the global variable somewhere inside a timer or something which makes your reading incorrect.与您使用全局变量的方式类似，调试起来可能会很痛苦，并且您可能会不小心更改计时器内某处的全局变量或使您的阅读不正确的东西。
解决方案6
2 2014-04-01 12:56:11
Every application has atleast one single rootScope and its lifecycle is the same as the app and every controller can have it's own scope, that is not shared with others.每个应用程序至少有一个 rootScope 并且其生命周期与应用程序相同，每个控制器都可以拥有自己的范围，不与其他人共享。
Have a look at this article :看看这篇文章：
https://github.com/angular/angular.js/wiki/Understanding-Scopes https://github.com/angular/angular.js/wiki/Understanding-Scopes
解决方案7
2 2017-04-13 11:28:05
I recommend you read the official in-depth Angular documentation for scopes.我建议您阅读有关范围的官方深入 Angular 文档。 Start at the section 'Scope Hierarchies':从“范围层次结构”部分开始：
https://docs.angularjs.org/guide/scope https://docs.angularjs.org/guide/scope
Essentially, $rootScope and $scope both identify specific parts of the DOM within which本质上，$rootScope 和 $scope 都标识了 DOM 的特定部分，其中
- Angular operations are carried out进行角度操作
- variables declared as part of either the $rootScope or $scope are available声明为 $rootScope 或 $scope 一部分的变量可用
Anything that belongs to the $rootScope is available globally across your Angular app, whereas anything that belongs to a $scope is available within the part of the DOM to which that scope applies.属于 $rootScope 的任何内容都可以在您的 Angular 应用程序中全局使用，而属于 $scope 的任何内容都可以在该范围适用的 DOM 部分中使用。
The $rootScope is applied to the DOM element that is the root element for the Angular app (hence the name $rootScope). $rootScope 应用于作为 Angular 应用程序根元素的 DOM 元素（因此名称为 $rootScope）。 When you add the ng-app directive to an element of the DOM, this becomes the root element of the DOM within which $rootScope is available.当您将 ng-app 指令添加到 DOM 的元素时，这将成为 $rootScope 可用的 DOM 的根元素。 In other words, properties etc of $rootScope will be available throughout your entire Angular application.换句话说， $rootScope 的属性等将在整个 Angular 应用程序中可用。
An Angular $scope (and all of it's variables and operations) is available to a particular subset of the DOM within your application. Angular $scope（及其所有变量和操作）可用于应用程序中 DOM 的特定子集。 Specifically, the $scope for any particular controller is available to the part of the DOM to which that particular controller has been applied (using the ng-controller directive).具体来说，任何特定控制器的 $scope 可用于应用该特定控制器的 DOM 部分（使用 ng-controller 指令）。 Note though that certain directives eg ng-repeat, when applied within a part of the DOM where the controller has been applied, can create child scopes of the main scope - within the same controller - a controller doesn't necessarily contain only one scope.请注意，尽管某些指令（例如 ng-repeat）在应用了控制器的 DOM 部分中应用时，可以创建主范围的子范围——在同一个控制器内——一个控制器不一定只包含一个范围。
If you look at the generated HTML when you run your Angular app, you can easily see which DOM elements 'contain' a scope, as Angular adds the class ng-scope on any element to which a scope has been applied (including the root element of the app, which has the $rootScope).如果你在运行你的 Angular 应用程序时查看生成的 HTML，你可以很容易地看到哪些 DOM 元素“包含”了一个范围，因为 Angular 在任何应用了范围的元素（包括根元素）上添加了类 ng-scope的应用程序，它具有 $rootScope）。
By the way, the '$' sign at the start of $scope and $rootScope is simply an identifier in Angular for stuff that's reserved by Angular.顺便说一下，$scope 和 $rootScope 开头的“$”符号只是 Angular 中用于 Angular 保留的内容的标识符。
Note that using $rootScope for sharing variables etc. between modules and controllers isn't generally considered best practice.请注意，使用 $rootScope 在模块和控制器之间共享变量等通常不被认为是最佳实践。 JavaScript developers talk about avoiding 'pollution' of the global scope by sharing variables there, since there may be clashes later on if a variable of the same name is used somewhere else, without the developer realising it's already declared on the $rootScope. JavaScript 开发人员谈论通过在那里共享变量来避免对全局范围的“污染”，因为如果在其他地方使用同名变量，那么稍后可能会发生冲突，而开发人员没有意识到它已经在 $rootScope 上声明。 The importance of this increases with the size of the application and the team that's developing it.这一点的重要性随着应用程序的规模和开发它的团队而增加。 Ideally the $rootScope will only contain constants or static variables, that are intended to be consistent at all times across the app.理想情况下， $rootScope 将只包含常量或静态变量，它们旨在在整个应用程序中始终保持一致。 A better way of sharing stuff across modules may be to use services and factories, which is a another topic!跨模块共享东西的更好方法可能是使用服务和工厂，这是另一个主题！
解决方案8
2 2018-05-01 08:15:38
Both are Java script objects and the difference is illustrated by diagram as below.两者都是 Java 脚本对象，区别如下图所示。
NTB:非关税壁垒：
First angular application try to find the property of any model or function in $scope , if it doesn't found the property in $scope , then it search in parent scope in upper hierarchy.第一个 angular 应用程序尝试在 $scope 中查找任何模型或函数的属性，如果在 $scope 中找不到该属性，则它在上层层次结构的父作用域中搜索。 If the property is still not found in upper hierarchy then angular tries to resolve in $rootscope.如果在上层层次中仍未找到该属性，则 angular 会尝试在 $rootscope 中解析。
解决方案9
1 2016-10-29 00:19:58
New styles, like John Papa's AngularJS Styleguide , are suggesting that we shouldn't be using $scope to save current page's properties at all.新样式，如John Papa 的 AngularJS Styleguide ，建议我们根本不应该使用$scope来保存当前页面的属性。 Instead we should use the controllerAs with vm approach where the view binds to the controller object itself.相反，我们应该使用controllerAs with vm方法，其中视图绑定到控制器对象本身。 Then use a capture variable for this when using the controllerAs syntax.然后在使用 controllerAs 语法时为此使用捕获变量。 Choose a consistent variable name such as vm, which stands for ViewModel.选择一致的变量名称，例如 vm，代表 ViewModel。
You will still need the $scope for its watching capabilities though.不过，您仍然需要$scope来查看其观看功能。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.