AngularJS 的作用域

AngularJS是一个MVC（Model View Controller）框架，使用作用域(scope)来管理控制器(controller)和视图(view)之间的数据交互。在AngularJS中，每个控制器都有一个作用域(scope)，它是一个纯JavaScript对象，用于在控制器和视图之间传递数据。

作用域的层次结构

作用域(scope)在AngularJS中形成了一个层次结构，这个结构与DOM(Document Object Model)树的结构相同。也就是说，每个作用域(scope)都可以包含其它作用域(scope)，这种关系被称为父子关系(parent-child relationship)。

在控制器中，我们可以使用$scope变量来访问当前作用域(scope)中的数据。如果一个变量在当前作用域(scope)中找不到，AngularJS会自动查找其父级作用域(scope)中的同名变量，直到找到为止。

作用域的继承

在AngularJS中，每个控制器都有一个独立的作用域(scope)，不同控制器之间的作用域是相互独立的。但是，如果一个控制器嵌套在另一个控制器内部，那么它会继承父级控制器的作用域(scope)。这种继承关系被称为作用域继承(scope inheritance)。

下面是一个示例代码片段，展示了作用域继承的用法：

<div ng-controller="ParentController">
  <p>{{name}}</p>
  <div ng-controller="ChildController">
    <p>{{name}}</p>
  </div>
</div>

app.controller('ParentController', function($scope) {
  $scope.name = 'Parent';
});

app.controller('ChildController', function($scope) {
  // ChildController继承了ParentController的作用域
});

作用域的事件

除了数据交互，作用域(scope)还可以用来传递事件。在AngularJS中，$rootScope是所有作用域(scope)的根作用域，也可以理解为全局作用域。我们可以在$rootScope上定义事件，然后在任何作用域(scope)中触发这些事件：

app.run(function($rootScope) {
  $rootScope.$on('eventName', function(event, data) {
    console.log(data);
  });
});

在上述代码中，我们使用$rootScope定义了一个名为eventName的事件。然后，我们可以在任何作用域(scope)中使用$scope.$emit或$scope.$broadcast方法来触发该事件：

app.controller('MyController', function($scope) {
  $scope.$emit('eventName', 'Hello world');
});

在上述代码中，我们使用$scope.$emit方法在当前作用域(scope)中触发了eventName事件，并且将一个字符串'Hello world'作为参数传递给了事件处理函数。在控制台中，会输出'Hello world'。如果我们想让该事件在当前作用域(scope)及其所有子作用域(scope)中触发，可以使用$scope.$broadcast方法。

总结

作用域(scope)是AngularJS中非常重要的概念之一。它用于在控制器(controller)和视图(view)之间传递数据和事件。作用域(scope)形成了一个层次结构，可以包含其它作用域(scope)，并且具有继承关系。$rootScope是所有作用域(scope)的根作用域，也可以理解为全局作用域。