$scope 和 $rootScope

在 AngularJS 中，$scope 和 $rootScope 是两个非常重要的概念。它们是 AngularJS 中实现双向数据绑定的核心，也是实现模块化和可重用性的重要手段。

$scope

$scope 是 AngularJS 中最基本的概念之一，它是 AngularJS 中的一个对象，用于连接视图层和控制层。在控制器中，我们可以将数据和方法绑定在 $scope 上，然后在视图层中通过表达式读取和修改这些数据，以及调用这些方法，从而实现双向数据绑定。

创建 $scope

在控制器中，我们可以使用 $scope 服务来创建一个新的 $scope 对象。例如：

angular.module('myApp', []).controller('myCtrl', function($scope) {
    $scope.message = 'Hello, World!';
});

在这个例子中，我们定义了一个名为 myCtrl 的控制器，并将其注入了 $scope 服务。然后我们在 $scope 对象上定义了一个名为 message 的属性，它的值为 'Hello, World!'。在视图层中，我们可以通过表达式 {{message}} 来显示这个值。

访问 $scope

在视图层中，我们可以通过表达式访问 $scope 对象上的属性和方法。例如：

<div ng-controller="myCtrl">
    <p>{{message}}</p>
</div>

在这个例子中，我们将控制器 myCtrl 与一个

修改 $scope

在视图层中，我们不仅可以读取 $scope 对象上的属性和方法，还可以修改它们。例如：

<input type="text" ng-model="message">

在这个例子中，我们使用 ng-model 指令将一个 元素绑定到了 $scope 对象上的 message 属性。当用户在输入框中输入文本时，AngularJS 会自动将输入框中的值同步到 $scope 对象上的 message 属性。从而实现了双向数据绑定。

$rootScope

$rootScope 是 $scope 的顶层对象，它是所有 $scope 对象的祖先。它可以被用来在多个控制器之间共享数据和方法。

创建 $rootScope

$rootScope 是由 AngularJS 框架自动创建的，我们可以直接将它注入到控制器中使用。例如：

angular.module('myApp', []).controller('myCtrl', function($scope, $rootScope) {
    $rootScope.message = 'Hello, World!';
});

在这个例子中，我们在控制器 myCtrl 中注入了 $scope 和 $rootScope。然后我们在 $rootScope 对象上定义了一个名为 message 的属性，它的值为 'Hello, World!'。$rootScope 中的数据和方法可以被所有的子 $scope 继承和访问。

访问 $rootScope

在视图层中，我们也可以通过表达式访问 $rootScope 对象上的属性和方法。例如：

<div ng-controller="myCtrl">
    <p>{{message}}</p>
</div>

在这个例子中，我们在一个

修改 $rootScope

在视图层中，我们同样可以通过表达式修改 $rootScope 对象上的属性和方法。但是，修改 $rootScope 涉及到全局数据的修改，容易产生不必要的副作用，所以应该谨慎使用。

总结

$rootScope 和 $scope 是 AngularJS 实现双向数据绑定和模块化的核心。$rootScope 是所有 $scope 对象的祖先，它可以被用来在多个控制器之间共享数据和方法；$scope 是连接视图层和控制层的关键，在控制器中使用 $scope 可以实现双向数据绑定。

参考链接：

• AngularJS - $scope
• AngularJS - $rootScope