如何理解rootScope？
我正在学习angularjs。当我学习scope时，我看到了rootScope。但我真的不明白它是什么。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>Family Name {{lastname}} Members:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
</script>
</body>
</html>
但是我不明白下面的代码有什么区别：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>Family Name {{lastname}} Members:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$scope.lastname = "Refsnes";
});
</script>
</body>
</html>
那么，如果scope和rootScope之间没有区别，为什么我们需要使用rootScope呢？
我希望有人能给我一个简单的例子，这样我就可以很容易地理解rootScope。
回答 3
Stack Overflow用户
发布于 2017-02-17 11:58:42
我想对@Yaser答案进行补充。我将使用google chrome控制台来解释整个网页中所有作用域继承的$rootScope层次结构。
步骤1:打开chrome web developer工具，用ng-app = "myApp"选择div
步骤2:转到chrome web开发人员工具的控制台，输入angular.element($0).scope()，这将为您获取一个包含$rootScope详细信息的对象。
您将在此处找到一个属性Refsnes："Refsnes"
步骤3:转到Elements选项卡并选择其中一个<li>
步骤4:在控制台中输入angular.element($0).scope()，这将获取包含所选作用域详细信息的对象
展开parent属性，您将找到rootScope的属性Refsnes lastname：“”
这应该解释了$rootScope是如何被网页上的所有其他作用域继承的
Stack Overflow用户
发布于 2017-02-17 11:07:05
每个应用程序都有一个single根作用域。所有其他作用域都是根作用域的后代作用域。作用域通过监视模型更改的机制在模型和视图之间提供分离。它们还提供事件发射/广播和订阅功能。
更多信息here。
然而，一个非常简单的解释是考虑rootScope和所有子作用域的原始父作用域。如果你想象一个层次结构，rootScope在顶端。
在你的例子中没有涉及rootScope，它只是一个当前的作用域。因此，在父作用域中有一个lastname，由于ng-repeat创建了一个子作用域，因此每个子作用域也都有一个lastname。
Stack Overflow用户
发布于 2018-01-02 15:04:45
$rootScope是最顶层的作用域。一个应用程序只能有一个$rootScope，它将在应用程序的所有组件之间共享。因此，它的作用就像一个全局变量。所有其他$scopes都是$rootScope的子项。
var app = angular.module('myApp', []);
app.controller('Ctrl1', ['$scope','$rootScope', function ($scope,$rootScope) {
$rootScope.name = "Rahul";
}]);
app.controller('Ctrl2', ['$scope','$rootScope', function ($scope,$rootScope) {
$scope.name = $rootScope.name;
}]);<!DOCTYPE html>
<html lang="en-US" ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div>
<div ng-controller="Ctrl1">
<span>{{name}}</span> - controller -1
</div>
<hr>
<div ng-controller="Ctrl2">
<span>{{name}}</span> - controller -2
</div>
</div>
</body>
</html>
var app = angular.module('myApp'，[])在此处输入图像描述//此处rootScope仅创建一次
从链接检查结构：- https://i.stack.imgur.com/rzBj3.png
下面是rootScope在将数据从一个控件传递到另一个控件时的简单用法
https://stackoverflow.com/questions/42288604
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号