在 AngularJS 中，指令是一种可重用的组件，可以通过自定义HTML标记来扩展应用程序。AngularJS中的指令有一个很好的特性，就是可以实现双向数据绑定。这个功能让我们可以更方便地控制用户界面和模型之间的交互。
什么是双向数据绑定？
在传统的 Web 应用程序中，通常需要手动更新视图和模型。当用户执行某些操作时（例如填写表单），必须将值从视图传递到模型。同样，当模型的属性发生变化时，必须手动更新视图，以反映最新的数据。
在 AngularJS 中，双向数据绑定解决了这个问题。它允许用户界面和模型之间的数据同步。简而言之，当视图发生更改时，模型也会相应更新；反之亦然。这使得开发人员可以更快地构建可靠的、响应式的应用程序。
在 AngularJS 中实现双向数据绑定
要在 AngularJS 中实现双向数据绑定，我们可以使用 ng-model 指令。这个指令可以将表单元素（如文本框、下拉列表等）的值与模型中的属性关联起来。当表单元素的值发生变化时，模型中的属性也会相应更新。
例如，我们可以创建一个输入框，并使用 ng-model 指令将其与 $scope.name 属性进行绑定：
------ ----------- ----------------
这将使 $scope.name 属性和输入框的值保持同步。如果用户在输入框中输入了新的值，则 $scope.name 将自动更新，反之亦然。
在 AngularJS 指令中实现双向数据绑定
除了在表单元素中使用 ng-model 指令之外，在指令中也可以实现双向数据绑定。要实现这个功能，我们需要在指令定义中使用 require 属性，并将其设置为 'ngModel'。这将告诉 AngularJS 我们想要访问 ng-model 指令的控制器。
然后，我们可以在指令的链接函数中访问 ng-model 指令的控制器，并通过它来读取和写入模型中的值。
以下是一个演示如何在指令中实现双向数据绑定的示例：
---------------------------- ---------- -
------ -
--------- ----
-------- ----------
----- --------------- -------- ------ ------------ -
-- -------------------
------------------- - ---------- -
------------------------------------
--
-- ----------------
---------------------- ---------- -
----------------------- -
-----------------------------------------
---
---
-- ----------------
------------------- - ---------- -
------------------------------------
--
-
--
---在这个指令中，我们通过 require: 'ngModel' 来访问 ng-model 指令的控制器。然后，在链接函数中，我们使用 ngModelCtrl.$render 方法从模型中读取初始值，并将其设置为元素的值。然后，我们使用 element.bind 方法来监听元素的变化，并调用 $setViewValue 方法来将元素的值更新到模型中。最后，我们再次
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30126