AngularJS框架中的数据绑定是如何工作的?

我还没有在他们的网站上找到技术细节。当数据从视图传播到模型时,它是如何工作的,这或多或少是清楚的。但是AngularJS如何在没有setter和getter的情况下跟踪模型财产的更改?

我发现有JavaScript观察者可能会做这项工作。但Internet Explorer 6和Internet Explorer 7不支持它们。那么AngularJS如何知道我更改了例如以下内容,并将此更改反映在视图上?

myobject.myproperty="new value";

当前回答

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

例如,如果模型具有以下内容:

$scope.model.people.name

表单的控制输入:

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

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

我传递的一个从服务器数据更新模型的例子是,当您根据与该视图相关联的殖民地和城市列表的书面加载请求邮政编码和邮编时,默认情况下会向用户设置第一个值。这一点我做得很好,确实发生了,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();
       }
};

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

例如,如果模型具有以下内容:

$scope.model.people.name

表单的控制输入:

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

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

我传递的一个从服务器数据更新模型的例子是,当您根据与该视图相关联的殖民地和城市列表的书面加载请求邮政编码和邮编时,默认情况下会向用户设置第一个值。这一点我做得很好,确实发生了,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框架脚本文件。

非常感谢。

下面是使用输入字段与AngularJS进行数据绑定的示例。我稍后会解释

HTML代码

<div ng-app="myApp" ng-controller="myCtrl" class="formInput">
     <input type="text" ng-model="watchInput" Placeholder="type something"/>
     <p>{{watchInput}}</p> 
</div>

AngularJS代码

myApp = angular.module ("myApp", []);
myApp.controller("myCtrl", ["$scope", function($scope){
  //Your Controller code goes here
}]);

正如您在上面的示例中看到的,AngularJS使用ng模型来监听和监视HTML元素,尤其是输入字段上发生的情况。当事情发生时,做点什么。在我们的例子中,ng模型使用八字胡符号{{}}绑定到我们的视图。输入字段中键入的任何内容都会立即显示在屏幕上。这就是数据绑定的美妙之处,以最简单的形式使用AngularJS。

希望这有帮助。

请参阅此处的工作示例代码笔

单向数据绑定是一种从数据模型中获取值并插入到HTML元素中的方法。无法从视图更新模型。它用于经典模板系统。这些系统仅在一个方向上绑定数据。Angular应用程序中的数据绑定是模型和视图组件之间数据的自动同步。

数据绑定允许您将模型视为应用程序中的唯一真实来源。视图始终是模型的投影。如果模型已更改,视图将反映更改,反之亦然。