在 AngularJS 中，$scope 和 $rootScope 都是非常重要的概念。它们都是用来管理数据模型的，但是它们之间有一些区别。在本文中，我们将详细介绍 $scope 和 $rootScope 的区别，以及如何使用它们来构建更好的应用程序。
$scope
在 AngularJS 中，$scope 是一个对象，用于在控制器和视图之间传递数据。每个控制器都有自己的 $scope 对象，它们都是独立的。这意味着每个控制器都有自己的数据模型，数据模型之间是相互独立的。
例如，我们可以定义一个控制器来管理一个表单：
-- -------------------- ---- ------- ----------------------- --- --------------------- ---------------- - --------------- - --- --------------- - --- ------------- - ---------- - ------------------------ ----------------- ------------------------ ----------------- -- ---展开代码
在上面的例子中，我们定义了一个控制器 MyCtrl，并将 $scope 对象注入到控制器中。我们在 $scope 对象上定义了三个属性：username、password 和 submit。我们可以在视图中使用这些属性来绑定表单的输入框和按钮。
$rootScope
$rootScope 是一个全局对象，它是所有 $scope 对象的祖先。这意味着 $rootScope 上定义的属性和方法可以在所有的 $scope 对象中使用。$rootScope 通常用于定义全局变量和函数。
例如，我们可以定义一个全局函数来处理用户登录：
angular.module('myapp', []) .run(function($rootScope) { $rootScope.isLoggedIn = false; $rootScope.login = function(username, password) { // ... }; });
在上面的例子中，我们定义了一个全局函数 login，并将它注入到 $rootScope 中。我们还定义了一个全局变量 isLoggedIn，用于存储用户的登录状态。
区别
$rootScope 和 $scope 之间的主要区别在于它们的作用域。$rootScope 是全局的，而 $scope 是局部的。$rootScope 上定义的属性和方法可以在所有的 $scope 对象中使用，而 $scope 上定义的属性和方法只能在当前控制器的视图中使用。
另一个区别是它们的继承关系。$rootScope 是所有 $scope 对象的祖先，而 $scope 对象之间是相互独立的。这意味着 $rootScope 上定义的属性和方法可以被所有 $scope 对象继承和使用，而 $scope 对象之间不能相互继承。
示例代码
下面是一个示例，演示了如何在 $rootScope 和 $scope 上定义属性和方法，并在视图中使用它们：
-- -------------------- ---- ------- ----------------------- --- ------------------------- - --------------------- - ------ ---------------- - ------------------ --------- - -- --- -- -- --------------------- ---------------- - --------------- - --- --------------- - --- ------------- - ---------- - ------------------------ ----------------- ------------------------ ----------------- ----------------- - ----- ----------------------------- ----------------- -- ---展开代码
在上面的例子中，我们定义了一个全局变量 isLoggedIn 和一个全局函数 login，并将它们注入到 $rootScope 中。我们还定义了一个控制器 MyCtrl，并将 $scope 对象注入到控制器中。我们在 $scope 对象上定义了三个属性：username、password 和 submit。在 submit 函数中，我们打印了用户名和密码，并将 isLoggedIn 设置为 true。我们还调用了全局函数 login，并传递了用户名和密码作为参数。
在视图中，我们可以使用 $rootScope 上的属性和方法，如下所示：
-- -------------------- ---- ------- ---- ------------------- ---------- ----------------- ------- ----------------------------------- ------ ---- -------------------- ----- --------------------- ------ ----------- ------------------- ----------------------- ------ --------------- ------------------- ----------------------- ------- ---------------------------- ------- ------展开代码
在上面的视图中，我们使用了 $rootScope 上的属性 isLoggedIn 和 $scope 上的属性 username 和 password。我们还使用了 $scope 上的方法 submit 和 $rootScope 上的方法 logout。当用户登录时，我们显示欢迎消息和一个登出按钮；当用户未登录时，我们显示一个登录表单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d8e4c9a941bf7134004060
