在 AngularJS 中,Scope(作用域)是一个核心概念,它充当着连接控制器和视图的桥梁。Scope 是一个 JavaScript 对象,其中包含了应用中的数据和方法,它定义了应用的数据模型,并通过双向数据绑定实现了数据的自动更新。
Scope 的主要特性包括:
-
连接控制器和视图:Scope 在控制器和视图之间建立了联系,使得数据可以在两者之间传递和同步。
-
数据模型定义:Scope 用于描述应用中的数据模型,包含了应用的数据和方法。
-
双向数据绑定:Scope 通过双向数据绑定机制,确保了视图和控制器之间的数据同步更新。
-
层级结构:Scope 形成了一个层级结构,与 HTML 页面的 DOM 结构相对应。每个 Scope 都有一个父级 Scope,最顶层的 Scope 称为根级 Scope。
-
继承关系:Scope 之间存在继承关系,子级 Scope 继承了父级 Scope 的属性和方法,这使得数据可以在不同层级的控制器和视图中共享。
-
事件处理机制:Scope 提供了
$watch
、$emit
和$broadcast
等事件处理机制,用于监听和通信。
如何使用 Scope:
- 当创建 AngularJS 控制器时,可以将 Scope 对象作为参数传递。
- 在控制器中,可以通过 Scope 定义变量和方法,这些变量和方法可以在视图中使用。
- Scope 的继承特性允许在嵌套的控制器中共享数据。
例如,在控制器中定义一个变量并绑定到 Scope 上:
app.controller('MyController', function($scope) {
$scope.name = 'John';
});
在视图中,可以直接使用这个变量,无需添加 Scope 前缀:
<div ng-app="myApp" ng-controller="MyController">
<h1>{{name}}</h1>
</div>
通过这种方式,AngularJS Scope 实现了控制器和视图之间的数据交互和同步【0†source】【1†source】【2†source】。