AngularJS 是一个流行的前端框架，它提供了许多有用的功能，其中之一就是双向数据绑定。这意味着当模型（Model）发生变化时，视图（View）也会相应地更新，反之亦然。这种功能可以大大简化开发，提高代码的可维护性和可读性。在这篇文章中，我们将讨论如何使用 $watch 来实现双向数据绑定。
$watch 的基本概念
在 AngularJS 中，$watch 是一个监听器，用于监视指定的变量或表达式的变化。当被监视的变量或表达式的值发生变化时，$watch 就会执行相应的回调函数，从而触发一系列的操作。$watch 的基本语法如下：
$scope.$watch('expression', function(newValue, oldValue) {
// do something
});其中，expression 是一个 AngularJS 表达式，表示要监视的变量或表达式。newValue 和 oldValue 分别表示变量或表达式的新值和旧值。当 newValue 和 oldValue 不相等时，$watch 的回调函数就会被执行。
使用 $watch 实现双向数据绑定
为了实现双向数据绑定，我们需要在模型（Model）和视图（View）之间建立一个关联。对于一个输入框，我们可以使用 ng-model 指令来建立关联。例如：
<input type="text" ng-model="name">
这个输入框与 $scope.name 变量建立了关联，当输入框中的值发生变化时，$scope.name 的值也会相应地更新。但是，如果我们想要在 $scope.name 变量的值发生变化时，将其同步到视图中，该怎么办呢？
这时，我们可以使用 $watch 来监听 $scope.name 变量的变化。例如：
$scope.$watch('name', function(newValue, oldValue) {
// do something
});当 $scope.name 的值发生变化时，$watch 的回调函数就会被执行。我们可以在回调函数中更新视图中的值，例如：
$scope.$watch('name', function(newValue, oldValue) {
document.getElementById('name').innerHTML = newValue;
});这样，当 $scope.name 的值发生变化时，页面上 id 为 name 的元素也会相应地更新。这就实现了双向数据绑定。
示例代码
下面是一个完整的示例代码，演示了如何使用 $watch 来实现双向数据绑定：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
---------------- ----------------
-------
----- -----------------------
------ ----------- ----------------
---- ----------------
------- -----------------------------------------------------------------------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
--------------------- ------------------ --------- -
----------------------------------------- - ---------
---
---
---------
-------
-------在这个示例中，我们在 ng-app 和 ng-controller 中分别指定了应用程序模块和控制器。在输入框中使用了 ng-model 指令来建立关联，在页面上使用了一个 div 元素来显示 $scope.name 的值。在控制器中使用了 $watch 来监听 $scope.name 的变化，并在回调函数中更新了页面上的值。
总结
在本文中，我们介绍了 AngularJS 中如何使用 $watch 来实现双向数据绑定。$watch 可以监视指定的变量或表达式的变化，并在变化时执行相应的回调函数。通过使用 $watch，我们可以在模型和视图之间建立双向数据绑定，从而简化开发，提高代码的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f039882b3ccec22f9547ec