<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS 双向数据绑定</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<h2>双向数据绑定示例</h2>
<input type="text" ng-model="message">
<p>{{ message }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.message = 'Hello, AngularJS!';
});
</script>
</body>
</html>
在这个例子中，ng-model 指令用于在 <input> 元素和 $scope.message 之间建立双向数据绑定。无论是在输入框中键入文本还是在控制器中修改 $scope.message 的值，两者都会保持同步。
要理解双向数据绑定的基本工作原理，请注意以下几点：
1. ng-model 指令： 通过 ng-model 指令，AngularJS 建立了输入框和模型属性之间的双向绑定。
2. $scope.message： 这是控制器中定义的模型属性。任何对 $scope.message 的更改都会在视图中反映出来，反之亦然。
3. 输入框和展示区域： 输入框中的任何更改都会立即在展示区域（<p> 元素）中反映出来，因为它们绑定到同一个模型属性。
这使得在应用程序中的不同部分之间轻松同步数据成为可能，而无需手动处理 DOM 操作。在实际应用中，双向数据绑定是 AngularJS 极大简化了开发流程的一个重要特性。请注意，现代 Angular 版本（Angular 2 及更高版本）也继承了这一特性，并在整个框架中进行了改进。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4886/Angular