AngularJS允许您实现双向数据绑定.然而,有趣的是它如何检测模型变化?该模型通常是一个普通的对象,如下面的代码.我们可以更改$scope.user的name属性,但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" />
有一个摘要周期,其中范围检查所有$watch表达式并将它们与之前的值进行比较.它查看对象模型的更改,如果旧值与新值不一样,AngularJS将更新相应的位置,a.k.a脏检查.
为了执行摘要周期,必须运行$apply(fn),这就是你从JavaScript进入Angular世界的方式.如何调用$apply(fn)(取自AngularJs integration with browser):
>浏览器的事件循环等待事件到达.事件是用户交互,计时器事件或网络事件(来自服务器的响应).
>事件的回调被执行.这进入了JavaScript上下文.回调可以修改DOM结构.
>一旦回调执行,浏览器将离开JavaScript上下文并根据DOM更改重新呈现视图.
为了实现双向绑定,指令注册观察者.为了使页面快速有效,我们需要尝试减少我们创建的所有这些观察者.所以在使用双向绑定时应该小心 – 即只在你真正需要时才使用它.否则使用单向:
< H1> {{:: vm.title}}< / h1>
这里显而易见的是,当用户在页面上时页面的标题可能不会被更改 – 或者如果它被更改则需要查看新标题.因此我们可以使用::在模板链接阶段注册单向绑定.
我在观察者爆炸中看到的主要问题是有数百行的网格.如果这些行有很多列,并且每个单元格中都有双向数据绑定,那么您就可以进行处理了.你可以坐下来等待在调制解调器时间加载页面!