Question

我正在学习angularjs。当我学习范围时，我会看到rootScope。但我真的不明白它是什么。

例如：

＆＃13;

<!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>

＆＃13;

但我不明白以下代码之间的区别：

＆＃13;

<!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>

＆＃13;

因此，如果范围与rootScope没有区别，为什么我们需要使用rootScope？

我希望有人可以给我一个简单的例子，这样我就可以轻松了解rootScope。

Answer 1

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

更多信息here。

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

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

Answer 2

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

第1步：打开chrome web开发人员工具，然后选择包含ng-app = "myApp"

的div

第2步：转到chrome web开发人员工具的控制台并输入angular.element($0).scope()，这会获取包含$rootScope详细信息的对象。

在这里你会找到一个属性姓氏：“Refsnes”

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

之一

步骤4：在控制台中输入angular.element($0).scope()，这将获取包含所选范围详细信息的对象

展开父属性，你会发现rootScope的属性 lastname：“Refsnes”

这应该解释网页上所有其他范围如何继承$rootScope

Answer 3

$ rootScope是最顶级的范围。一个应用程序只能有一个$ rootScope，它将在应用程序的所有组件之间共享。因此它就像一个全局变量。所有其他$范围都是$ rootScope的子代。

＆＃13;

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;
}]);

＆＃13;

<!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>

＆＃13;

var app = angular.module（＆＃39; myApp＆＃39;，[]）[在此输入图片说明] [1] //这里只创建一次rootScope

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

这是rootScope的简单用法，用于将数据从一个控制器传递到另一个控制器

如何理解rootScope？

3 个答案: