双向数据绑定是 AngularJS 独有的特性之一，其可以将视图和模型绑定在一起，实现双向同步更新的效果，不仅节省了开发人员的大量时间和精力，还提高了应用程序的可维护性。本文将介绍 AngularJS 中如何实现双向数据绑定。
什么是双向数据绑定？
在传统的 Web 应用中，用户进行某种操作，需要通过 JavaScript 修改 DOM 中的某个元素，然后再向服务器端发送 AJAX 请求，更新后端数据，最后将数据返回到前端应用，再通过 JavaScript 修改 DOM 元素内容，从而展示给用户。这种方式很容易出现 DOM 操作频繁、难以维护、代码量大等问题。
而双向数据绑定则是在视图和模型之间建立了一条双向的数据通道，在模型数据发生变化时，自动更新视图，而在用户在视图中输入数据时，自动更新模型数据。这种机制使得开发者无需手动操作 DOM，大大提高了开发效率。
AngularJS 中的双向数据绑定
AngularJS 的双向绑定机制是通过 $watch 机制实现的。当 AngularJS 中的数据变化时，$watch 就会自动检测到变化，并更新相应的视图，当用户在视图中输入数据时，$watch 也会自动更新数据模型。这仿佛是一条无限循环的数据通道。
双向数据绑定的实现
要实现双向数据绑定，我们需要使数据模型和视图关联起来。在 AngularJS 中，我们可以使用 ng-model 指令来实现。ng-model 将数据模型和视图元素进行绑定，如下所示：
<input type="text" ng-model="username">
在这个例子中，我们将视图元素 input 的 value 属性与数据模型中的 username 属性进行绑定，当用户在 input 中输入内容时，数据模型中的 username 属性也会自动进行更新。
实现过程
- 在 HTML 模板中，使用 ng-model 指令将视图元素和数据模型进行绑定。
<div ng-app="app" ng-controller="ctrl">
<input type="text" ng-model="username">
<p>您好，{{username}}。</p>
</div>- 在 JavaScript 中，创建一个控制器，将数据模型和视图控制器关联起来。
var app = angular.module('app', []);
app.controller('ctrl', function($scope){
$scope.username = '';
})这个控制器通过 $scope 对象将数据模型和视图进行双向绑定。
总结
双向数据绑定是 AngularJS 中的一个非常重要的概念，它可以将视图和模型联系起来，使得应用程序开发更加高效和便捷。在实现双向绑定时，我们只需要使用 ng-model 指令，在 HTML 模板中将视图元素和数据模型进行绑定，再在 JavaScript 的控制器中将数据模型和视图控制器进行关联即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a405db48841e98940763a8