如何理解rootScope？

我正在学习angularjs。当我学习范围时，我会看到rootScope。但我真的不明白它是什么。如何理解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>

因此，如果作用域和rootScope之间没有区别，为什么我们需要使用rootScope？

我希望有人能给我一个简单的例子，以便我可以很容易地理解rootScope。

来源

2017-02-17 hellozjf

每个应用程序都有一个single根作用域。所有其他作用域都是根作用域的后代作用域。范围通过观察模型变化的机制提供模型和视图之间的分离。他们还提供活动排放/广播和订阅设施。

更多信息here。

然而，一个非常简单的解释是考虑rootScope和所有子范围的原始父项。如果您想象一个层次结构，rootScope就位于顶层。

我的例子中没有涉及到rootScope，它只是一个perent范围。因此，您的父范围中有一个lastname，并且由于ng-repeat创建了一个子范围，所以它们中的每个人也都有一个lastname。

来源

2017-02-17 03:07:04 Yaser

我想添加到@Yaser的答案。我将使用谷歌浏览器控制台来解释$rootScope层次结构，该层次结构由整个网页中的所有范围继承。

步骤1：打开Chrome网上应用的开发工具，并与ng-app = "myApp"

步骤2选择div：转到Chrome网上应用开发工具的控制台，然后输入angular.element($0).scope()，这会为你抓取含有$rootScope细节的对象。

在这里，你会发现一个属性名字： “的Refsnes”

第3步：转到元素标签，然后选择<li>

步骤4中的一个：在控制台类型angular.element($0).scope() ，这将获取包含选定范围的详细信息的您和对象

展开父级属性，您将fin d rootScope的财产名字：“的Refsnes”

这应解释如何$rootScope由网页

来源

2017-02-17 03:58:41

的$ rootScope上的所有其他范围继承是最顶层的范围。应用程序只能有一个$ rootScope，它将在应用程序的所有组件之间共享。因此它就像一个全局变量。所有其他$作用域都是$ 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>

变种应用= angular.module（ '对myApp'，[]）[此处输入图像的描述] [1] //这里rootScope创建只有一个时间

检查结构链接： - https://i.stack.imgur.com/rzBj3.png

这里是一个简单的使用rootScope作为从一个控制器传递数据到另一个控制器

来源

2018-01-02 07:04:45

如何理解rootScope？

回答

相关问题