数据绑定：

什么是数据绑定？

每当用户更改视图中的数据时，范围模型中就会出现该更改的更新，反之亦然。

怎么可能？

简短回答：借助消化循环。

说明：Angular js在作用域模型上设置观察者，如果模型发生变化，它会触发监听器函数。

$scope.$watch('modelVar' , function(newValue,oldValue){

//使用新值更新Dom代码

});

那么何时以及如何调用观察程序函数？

作为摘要循环的一部分调用观察程序函数。

摘要循环是作为angular js内置指令/服务的一部分自动触发的，如ng model、ng bind、$timeout、ng click等。。让你触发消化周期。

摘要循环功能：

$scope.$digest() -> digest cycle against the current scope.
$scope.$apply() -> digest cycle against the parent scope 

即$rootScope.$apply（）

注：$apply（）等于$rootScope$digest（）这意味着脏检查从根或顶部或父作用域开始，一直到angular js应用程序中的所有子$scopes。

上述功能适用于上述版本的浏览器IE，只需确保您的应用程序是angular js应用程序，这意味着您使用的是脚本标记中引用的angularjs框架脚本文件。

非常感谢。

AngularJs支持双向数据绑定。意味着您可以访问数据视图->控制器和控制器->视图

例如。

1)

// If $scope have some value in Controller. 
$scope.name = "Peter";

// HTML
<div> {{ name }} </div>

O/P

Peter

您可以在ng模型中绑定数据，如：-2)

<input ng-model="name" />

<div> {{ name }} </div>

在上面的示例中，无论用户将给出什么输入，它都将在＜div＞标记中可见。

如果要将输入从html绑定到控制器：-3)

<form name="myForm" ng-submit="registration()">
   <label> Name </lbel>
   <input ng-model="name" />
</form>

如果您想在控制器中使用输入名称，

$scope.name = {};

$scope.registration = function() {
   console.log("You will get the name here ", $scope.name);
};

ng模型绑定我们的视图并在表达式{{}}中呈现它。ng模型是在视图中显示给用户并与用户交互的数据。因此，很容易在AngularJs中绑定数据。

数据绑定：

什么是数据绑定？

每当用户更改视图中的数据时，范围模型中就会出现该更改的更新，反之亦然。

怎么可能？

简短回答：借助消化循环。

说明：Angular js在作用域模型上设置观察者，如果模型发生变化，它会触发监听器函数。

$scope.$watch('modelVar' , function(newValue,oldValue){

//使用新值更新Dom代码

});

那么何时以及如何调用观察程序函数？

作为摘要循环的一部分调用观察程序函数。

摘要循环是作为angular js内置指令/服务的一部分自动触发的，如ng model、ng bind、$timeout、ng click等。。让你触发消化周期。

摘要循环功能：

$scope.$digest() -> digest cycle against the current scope.
$scope.$apply() -> digest cycle against the parent scope 

即$rootScope.$apply（）

注：$apply（）等于$rootScope$digest（）这意味着脏检查从根或顶部或父作用域开始，一直到angular js应用程序中的所有子$scopes。

上述功能适用于上述版本的浏览器IE，只需确保您的应用程序是angular js应用程序，这意味着您使用的是脚本标记中引用的angularjs框架脚本文件。

非常感谢。

显然，并没有定期检查作用域中附加的对象是否有任何变化。并不是所有附加到作用域的对象都被监视。范围原型通常维护一个$$观察者。当调用$digest时，作用域仅遍历此$$watcher。

Angular为每个$$观察者添加一个观察者

｛｛表达式｝｝ — 在您的模板中（以及其他任何有表达式的地方），或者在我们定义ng模型时。$范围$watch（'表达式/函数'） — 在您的JavaScript中，我们只需附加一个范围对象来观察angular。

$watch函数接受三个参数：

第一个是一个观察函数，它只返回对象，或者我们可以添加一个表达式。第二个是侦听器函数，当对象发生更改时将调用该函数。所有诸如DOM更改的事情都将在该函数中实现。第三个是可选参数，它接受布尔值。如果它为真，angular deep会监视对象；如果它为假，angular只会对对象进行引用监视。$watch的大致实现如下

Scope.prototype.$watch = function(watchFn, listenerFn) {
   var watcher = {
       watchFn: watchFn,
       listenerFn: listenerFn || function() { },
       last: initWatchVal  // initWatchVal is typically undefined
   };
   this.$$watchers.push(watcher); // pushing the Watcher Object to Watchers  
};

在Angular中有一个有趣的东西叫做Digest Cycle。$digest循环是调用$scope的结果$digest（）。假设您通过ng-click指令更改处理程序函数中的$scope模型。在这种情况下，AngularJS通过调用$digest（）自动触发$digest循环。除了ng-click之外，还有几个内置的指令/服务可以让您更改模型（例如ng-model、$timeout等）并自动触发$digest循环。$digest的大致实现如下所示。

Scope.prototype.$digest = function() {
      var dirty;
      do {
          dirty = this.$$digestOnce();
      } while (dirty);
}
Scope.prototype.$$digestOnce = function() {
   var self = this;
   var newValue, oldValue, dirty;
   _.forEach(this.$$watchers, function(watcher) {
          newValue = watcher.watchFn(self);
          oldValue = watcher.last;   // It just remembers the last value for dirty checking
          if (newValue !== oldValue) { //Dirty checking of References 
   // For Deep checking the object , code of Value     
   // based checking of Object should be implemented here
             watcher.last = newValue;
             watcher.listenerFn(newValue,
                  (oldValue === initWatchVal ? newValue : oldValue),
                   self);
          dirty = true;
          }
     });
   return dirty;
 };

如果我们使用JavaScript的setTimeout（）函数来更新范围模型，Angular无法知道您可能会更改什么。在这种情况下，我们有责任手动调用$apply（），这将触发$digest循环。类似地，如果您有一个指令设置DOM事件侦听器并更改处理程序函数中的某些模型，则需要调用$apply（）以确保更改生效。$apply的主要思想是，我们可以执行一些不知道Angular的代码，这些代码可能仍然会改变作用域上的内容。如果我们将代码包装在$apply中，它将负责调用$digest（）。$apply（）的粗略实现。

Scope.prototype.$apply = function(expr) {
       try {
         return this.$eval(expr); //Evaluating code in the context of Scope
       } finally {
         this.$digest();
       }
};

我自己也有一段时间对此感到奇怪。没有setters，AngularJS如何注意到$scope对象的更改？它会投票吗？

它实际上是这样做的：您修改模型的任何“正常”位置都已经从AngularJS的内部调用，因此它会在代码运行后自动为您调用$apply。假设你的控制器有一个方法，它连接到某个元素上的ng点击。因为AngularJS为您将该方法的调用连接在一起，所以它有机会在适当的位置执行$apply。同样，对于出现在视图中的表达式，这些表达式由AngularJS执行，因此它执行$apply。

当文档谈到必须为AngularJS之外的代码手动调用$apply时，它指的是运行时不源自调用堆栈中AngularJS本身的代码。

碰巧我需要将一个人的数据模型与表单链接起来，我所做的是将数据与表单直接映射。

例如，如果模型具有以下内容：

$scope.model.people.name

表单的控制输入：

<input type="text" name="namePeople" model="model.people.name">

这样，如果修改对象控制器的值，这将自动反映在视图中。

我传递的一个从服务器数据更新模型的例子是，当您根据与该视图相关联的殖民地和城市列表的书面加载请求邮政编码和邮编时，默认情况下会向用户设置第一个值。这一点我做得很好，确实发生了，angularJS有时需要几秒钟来刷新模型，为此，您可以在显示数据时放置一个微调器。