AngularJS入门教程之Scope(作用域)

AngularJS Scope

Scope，作为AngularJS中的核心概念之一，是连接HTML视图与JavaScript控制器的桥梁。在AngularJS应用中，Scope扮演着一个至关重要的角色。

让我们从基础开始，了解一下如何使用Scope。当你在AngularJS中创建一个控制器时，你可以将$scope对象作为一个参数传递。例如：

创建一个简单的AngularJS应用，其中包含一个控制器和一个视图。视图上有一个双括号表达式{{carname}}，而控制器中有一个名为$scope.carname的属性。

HTML部分代码如下：

```html

```

在这个例子中，控制器中创建了一个名为"carname"的属性，它可以在视图中通过双括号表达式获取。当你运行这段代码时，页面上会显示"Volvo"。这就是Scope的基本用法。视图通过Scope获取控制器的数据，而控制器则通过Scope修改视图。

接下来，我们深入一下Scope的概念。AngularJS应用主要由三部分组成：视图(View)，模型(Model)和控制器(Controller)。而Scope就是模型。它是一个JavaScript对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。当视图发生改变时，模型和控制器也会相应更新。这就是AngularJS的双向数据绑定机制。Scope确保视图与模型之间的数据同步。在上面的例子中，当你在输入框中输入新的名字时，"name"这个模型的属性值也会随之改变，同时视图也会更新显示新的名字。这就是Scope的强大之处。

理解 AngularJS 中的 Scope

我是 John Doe。今天我想和大家一下 AngularJS 中的 Scope 概念。当你在输入框中修改值时，这背后其实涉及到模型（model）和控制器对应属性的变化。而这一切，都离不开 Scope 的作用。

我们要明白一个概念：Scope 的作用范围。在开发过程中，了解你当前使用的 Scope 是至关重要的。在一些简单的例子中，可能只有一个作用域（scope），处理起来相对简单。但在大型项目中，HTML DOM 中有多个作用域，这时你就需要明确你正在操作的 scope 是哪一个。

让我们通过一个 AngularJS 实例来进一步理解。当我们使用 ng-repeat 指令时，每一个重复的项都会访问当前的重复对象。就像在一个家族树中，每个成员都能访问到家族的姓氏一样。

让我们看一个 HTML 示例，这里我们创建了一个简单的应用，使用 ng-app 和 ng-controller 来控制。在 ul 标签中，我们通过 ng-repeat 指令重复一组名字，并且每个名字后面都附上了家族的姓氏。

运行这段代码后，你会看到 "Emil Refsnes"、"Tobias Refsnes"、"Linus Refsnes" 这样的输出。这里的姓氏 "Refsnes" 就是通过 $rootScope 定义的，它在整个应用中都可以被访问到。这就像是一个家族的姓氏，在整个家族中都是通用的。

而每个 `