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

发布时间：2020-12-17 07:33:17 所属栏目：安全来源：网络整理

导读：AngularJS允许您实现双向数据绑定.然而,有趣的是它如何检测模型变化？该模型通常是一个普通的对象,如下面的代码.我们可以更改$scope.user的name属性,但AngularJS如何检测模型已更改？ AngularJS是否枚举$scope对象的所有属性？ angular.module('myApp',[]) .

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更改重新呈现视图.

Data Binding

Digest Cycle Explanation

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

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!