• angular中的双向数据绑定和脏值检查


    AngularJS双向数据绑定(MVVM)
    Angular中的双向数据绑定指的是,当view中有任何数据发生了变化,那么这个变化也会自动反馈到$scope数据上;类似的,当scope模型发生变化时,view中的数据也会更新最新值;
     
    原理:当有表达式 ng-model 时,AngularJS在幕后会给scope模型上设置一个watcher,它用来在数据发生变化时更新view,这里的watcher和在AngularJS中设置的watcher一样。
    $scope.$watch('aModel', function(newValue, oldValue) {})
    脏值检查
    $digest 和 $apply 都是脏值检查的主内容。
     
    例:
    in
    html: <input ng-model="value" /> in controller.js: $scope.value = "HELLo";
     
    我们只要改变input里的值,在controller里对应的$scope.value 也会随之发生相同的变化,这里就是给$watch列表添加了一个监控函数,从而做到这个效果的。
    $watch 列表就是给所有绑定到同一$scope 对象的UI元素添加一个监控函数到$watch列表里。
    $watch 列表会触发$digest循环,并且在$digest循环中通过"脏值检查"机制进行解析。
     
    什么是脏值检查?简单来说,就是Angular检查模型的值是否发生了变化,而程序还没对该变化进行同步的机制。Angular 将会通过脏值检查遍历整个$watch 列表,只要当中的某个值发生了变化,应用就会退回到$digest循环中,直到检测到这个值不再发生变化,然后再启用新值并且继续遍历$watch列表。整个$watch 列表循环后,且其中的值都不再变化了,那么整个应用程序的model也就趋于稳定了,这时候才在view渲染该有的数据。  
     
    常见的错误
    Error: [$rootScope: infding] 10 $digest()  iterations reached. Abort...
    $digest 循环运行10次,Angular就会抛出这个异常,同时停止$digest循环。而10这个次数可以在config里面注入$rootScopeProvider服务并且配置;
    $rootScopeProvider.digestTtl(15);
     
    $digest 循环是脏值检查机制的主体。那么 $digest怎么玩呢?
    $digest会被自动进入,比如$scope的$watch列表中值发生变化,则会触发$digest循环。
    当我们使用$apply 就可以召唤$digest了;
    $apply() 函数在框架外部让表达式在Angular上下文内部执行;
    Angular提供的可用于视图中任意指令都可调用$apply(), 比如:ng-click,ng-change等。
    还有一些Angular内置的服务会调用$digest(), 如$http服务。
    Angular不建议在controller内操作DOM,DOM应该在Directive中使用;
    不建议在controller中使用$apply;
  • 相关阅读:
    【XSY2720】区间第k小 整体二分 可持久化线段树
    【XSY2719】prime 莫比乌斯反演
    【XSY2718】gift 分数规划 网络流
    【CTSC2017】【BZOJ4903】吉夫特 卢卡斯定理 DP
    【XSY2729】欧拉子图 无向图连通性 数学
    【XSY2730】Ball 多项式exp 多项式ln 多项式开根 常系数线性递推 DP
    【BZOJ1999】【NOIP2007】树网的核 单调队列优化DP
    NOIP2017游记
    【BZOJ2127】happiness 网络流
    【BZOJ3625】【CF438E】小朋友和二叉树 NTT 生成函数 多项式开根 多项式求逆
  • 原文地址:https://www.cnblogs.com/dxt510/p/7151203.html
Copyright © 2020-2023  润新知