什么是数据绑定
数据绑定是 AngularJS 中最重要的概念之一。它是指将应用程序中的数据与用户界面元素进行连接，使得数据的变化能够实时地反映在用户界面上，同时用户对界面元素的操作也能够自动地更新数据。AngularJS 的数据绑定机制是双向的，即数据的变化能够自动更新界面，而用户对界面的操作也能够自动更新数据。
常见的数据绑定方法
插值表达式
插值表达式是 AngularJS 中最简单的数据绑定方法，它使用双大括号语法将数据绑定到 HTML 元素上。例如，我们可以将一个变量绑定到 HTML 元素的文本内容上：
<p>{{message}}</p>
当变量的值发生变化时，文本内容也会自动更新。
ng-bind 指令
ng-bind 指令与插值表达式的作用相同，它将数据绑定到 HTML 元素上，但是它不使用双大括号语法，而是使用指令的形式。例如，我们可以将一个变量绑定到 HTML 元素的文本内容上：
<p ng-bind="message"></p>
ng-model 指令
ng-model 指令用于将表单元素的值与作用域中的变量进行双向绑定。例如，我们可以将一个 input 元素的值与作用域中的变量进行绑定：
<input type="text" ng-model="message">
当 input 元素的值发生变化时，作用域中的变量也会自动更新。
ng-repeat 指令
ng-repeat 指令用于循环遍历一个数组，并将数组中的每个元素绑定到 HTML 元素上。例如，我们可以循环遍历一个数组，并将数组中的每个元素绑定到 li 元素上：
<ul> <li ng-repeat="item in items">{{item}}</li> </ul>
ng-class 指令
ng-class 指令用于根据作用域中的变量来动态地设置 HTML 元素的 class 属性。例如，我们可以根据作用域中的变量来动态地设置一个元素的 class 属性：
<div ng-class="{active: isActive, disabled: isDisabled}">...</div>
当 isActive 变量为 true 时，元素的 class 属性会包含 active 类名；当 isDisabled 变量为 true 时，元素的 class 属性会包含 disabled 类名。
常见的问题及解决方法
数据绑定失效
有时候，我们会发现数据绑定失效了，即数据的变化没有能够实时地反映在用户界面上，或者用户对界面元素的操作也没有能够自动地更新数据。这种情况通常是由于作用域的继承关系导致的。
解决方法是使用 AngularJS 中的 $scope.$apply() 方法强制更新作用域。例如，我们可以在控制器中添加以下代码：
$scope.$apply(function() { // 更新作用域中的数据 });
数据绑定循环引用
有时候，我们会发现数据绑定出现了循环引用的问题，即一个变量的值依赖于另一个变量的值，而另一个变量的值又依赖于第一个变量的值。这种情况通常是由于作用域中的变量相互引用导致的。
解决方法是使用 AngularJS 中的 $timeout() 方法进行异步更新。例如，我们可以在控制器中添加以下代码：
$timeout(function() { // 更新作用域中的数据 });
性能问题
由于数据绑定机制的复杂性，有时候会出现性能问题，即页面加载速度变慢、响应速度变慢等。这种情况通常是由于作用域中的变量过多、数据绑定过于频繁等原因导致的。
解决方法是尽量减少作用域中的变量数量，避免不必要的数据绑定，使用 ng-if、ng-switch 等指令进行条件渲染，使用 ng-class、ng-style 等指令进行样式渲染，使用 $watch() 方法进行手动监控数据变化等。
示例代码
下面是一个使用 ng-repeat 指令循环遍历数组的示例代码：
-- -------------------- ---- ------- ---- -------------- ----------------------- ---- --- --------------- -- -------------------- ----- ------ -------- --- --- - ----------------------- ---- ------------------------ ---------------- - ------------ - --------- --------- ---------- --- ---------展开代码
当 items 数组的值发生变化时，ul 元素中的 li 元素也会自动更新。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d52db5a941bf713498fdaf
