AngularJS Scope作用域详解：从原理到双向绑定实战

简介

Scope作用域的核心概念

Scope（作用域）是连接HTML视图与JavaScript控制器的关键纽带。

作为一个存储应用数据模型的对象，Scope具备可用的方法和属性。

Scope可直接应用于视图和控制器中。

作用域充当Web应用中控制器与视图之间的粘合剂：

控制器 --> 作用域 --> 视图（DOM） 指令 --> 作用域 --> 视图（DOM）

$Scope对象的基本使用

在AngularJS中创建控制器时，可将$Scope对象作为参数传递：

<div ng-controller="myCtrl">
<h1>{{name}}</h1>
</div>

<script>
var app = angular.module('test', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "天下行走";
});
</script>

输出结果： 天下行走

在控制器中创建名为“name”的属性，该名称需与视图中{{ }}内的名称相对应。

当在控制器中引入$Scope对象后，视图（HTML）即可访问这些属性。

在视图中无需添加$Scope前缀，直接使用属性名即可，例如：{{name}}。

AngularJS应用由以下部分组成：

View（视图），即HTML文件。

Model（模型），指当前视图中可用的数据。

Controller（控制器），即JavaScript函数，负责添加或修改属性。

Scope是一个JavaScript对象，包含属性和方法，这些内容可在视图和控制器中使用。

双向绑定机制与数据流程

再来看一个示例：

<div ng-app="myApp" ng-controller="myCtrl">
  输入你的名字：
  <input ng-model="name">
  <h1>{{greeting}}</h1>
  <button ng-click='sayHello()'>greet</button>  
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "张三";
  $scope.sayHello = function() {
    $scope.greeting = $scope.name + '是个笨蛋!';
  };
});
</script>

在此示例中，

1. 控制器：MyCtrl，它引用了$Scope并在其上注册了两个属性和一个方法
2. $Scope对象：持有上述示例所需的数据模型，包括name属性、greeting属性（注：这是在sayHello()方法被调用时注册的）以及sayHello()方法
3. 视图：包含一个输入框、一个按钮以及利用双向绑定显示数据的内容块

具体整个示例包含两个流程，从控制器发起的角度来看如下：

1、控制器向作用域写入属性：

为作用域中的name赋值，随后作用域通知视图数据已变化。input通过ng-model实现双向绑定，感知name的变化，进而在视图中渲染出更新后的值

2、控制器向作用域写入方法

为作用域中的sayHello()方法赋值。该方法被视图中的button调用，因button通过ng-click绑定了该方法，当用户点击按钮时，sayHello()被触发。此方法读取作用域中的name属性，拼接后缀字符串，并将结果赋值给作用域中新创建的greeting属性

若从视图角度分析整个示例过程，主要涉及以下三个部分：

1、input的渲染逻辑：展示了通过ng-model实现的作用域与视图中表单元素的双向绑定

1. 根据ng-model中的name去作用域中取值，若已有值，则用该默认值填充当前输入框
2. 接收用户输入，并将用户输入的字符串传给name，此时作用域中的该属性值实时更新为用户输入的值

2、button的逻辑

接收用户单击事件，调用作用域中的sayHello()方法

3、{{greeting}}的渲染逻辑

1. 初始阶段：在用户未单击按钮时，不显示内容
2. 取值阶段：在用户单击后，该表达式去scope中获取greeting属性。由于本例中作用域与控制器为同一作用域，此时该作用域下的greeting属性已存在，因此该属性被成功获取
3. 计算阶段：在当前作用域下计算greeting表达式，然后渲染视图，显示“张三是个笨蛋！”

经过以上两种角度的示例过程分析，我们可以得知：作用域（scope）对象及其属性是视图渲染的唯一数据来源。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。