AngularJS如何实现其双向数据绑定机制？

Question

AngularJS允许您实现双向数据绑定.然而,有趣的部分是它如何检测模型变化？该模型通常是一个普通的对象,如下面的代码.我们可以更改名称属性,$scope.user但AngularJS如何检测模型已更改？AngularJS是否枚举了$scope对象的所有属性？

angular.module('myApp', [])
      .controller('BusinessCardController', function($scope){
        $scope.user = {
          name: 'Tanay Pant'
        }
      });

<input type="text" ng-model="user.name" placeholder="Full Name" />

Answer 1

有一个摘要周期,其中范围检查所有$ watch表达式并将它们与之前的值进行比较.它查看对象模型的更改,如果旧值与新值不同,AngularJS将更新相应的位置,即脏检查.

为了$apply(fn)运行摘要周期,这就是你从JavaScript进入Angular世界的方法.如何$apply(fn)调用(取自AngularJs 与浏览器的集成):

1. 浏览器的事件循环等待事件到达.事件是用户交互,计时器事件或网络事件(来自服务器的响应).
2. 事件的回调被执行.这会进入JavaScript上下文.回调可以修改DOM结构.
3. 一旦回调执行,浏览器就会离开JavaScript上下文并根据DOM更改重新呈现视图.

数据绑定

摘要周期解释

为了实现双向绑定,指令注册观察者.为了使页面快速有效,我们需要尝试减少我们创建的所有这些观察者.因此在使用双向绑定时应该小心 - 即只在您真正需要时才使用它.否则使用单向:

<h1> {{ ::vm.title }} </h1>

这里显而易见的是,当用户在页面上时,页面的标题可能不会被更改 - 或者如果它被更改则需要查看新标题.因此,我们可以::在模板链接阶段使用注册单向绑定.

我观察到的观察者爆炸的主要问题是有数百行的网格.如果这些行有很多列,并且在每个单元格中都有双向数据绑定,那么您就可以进行处理了.您可以坐下来等待调制解调器时间加载页面!

Answer 2

双向绑定几乎仅限于使用的元素ng-model.从视图到模型的方向使用标准事件处理程序来检测必须在模型中更新的更改(例如,onchange).从模型返回到视图的方向在a期间更新$digest.但我们不$digest直接打电话.

页面上将响应摘要周期的每个元素都会在某处使用监听器和表达式附加到其作用域$watch.当您{{ foo() }}在ng-model='user.name'内部编写或使用时,会在内部调用$watch一个Javascript表达式,该表达式将在每次运行摘要周期时运行.这种注册可能发生在模板编译期间(我们的第一个例子),或者可能发生在指令的链接阶段(我们的第二个).

这里没有魔力.附加的侦听器是常规函数 - 在我们的示例中,foo()为您提供了表达式的侦听器,它将更新页面上的html文本,而表达式的侦听器user.name将调用setText,或者setOption或者需要的任何内容通过ng-model附加的特定输入.

虽然angular可以处理大部分的监听,但你可以在任何有权访问范围的函数中手动将你自己的监听表达式与你自己的监听器连接起来(范围很重要,因为如果页面的相应部分被删除,我们将拆除那些观察者).注意多余.绑定不是免费的,绑定的东西越多,页面响应的速度就越慢.一次性绑定是降低此成本的一种方法.使用$on与$emit和$broadcast是另一回事.

那么什么时候被称为消化？这当然不是自动的.如果摘要周期正在运行,则意味着某人在某处调用$apply了他们的作用域或根作用域. ng-model附加处理程序,它将响应常规的html事件并$apply代表您拨打电话.但是foo(),另一方面,在某个地方的某些脚本调用之前,永远不会被调用$apply.幸运的是,你填写的大多数函数都会通过调用来填充这些函数$apply,因此你不必经常自己调用(例如,$timeout包含它$apply,这就是为什么我们使用它而不是setTimeout).但是如果你使用的是角度范围之外的东西(连接到事件的第三方库),你需要记住给$apply自己打电话,就像上面一样,你可以通过调用$apply你有权访问的任何地方来手动完成范围.