zoukankan      html  css  js  c++  java
  • 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;
  • 相关阅读:
    自己写的SqlHelper
    宿叶网思路
    phpMyAdmin教程 之 创建新用户/导入/导出数据库
    什么是主机空间?干什么用?
    转 sql注入
    xUtils
    仿360状态,类流量监控桌面浮动显示
    在Yii Framework中利用PHPMailer发送邮件(2011-06-02 14:06:23)
    MD5类库(hex_md5)
    MYSQL的随机查询的实现方法
  • 原文地址:https://www.cnblogs.com/dxt510/p/7151203.html
Copyright © 2011-2022 走看看