脏值检测

  • 为什么更改数据的时候,页面上的东西就会跟着更改?

  • 脏值检测是原理性的东西。(内部实现)


  • 1.当事件触发时(属性改变事件,数据更新事件),会执行一个$digest循环
    $digest循环:这个循环会去遍历$watchList,去询问里面的属性有没有被更改过。

  • 2.$watchList里面的每一个属性都会被$watch来监听,如果被改变,会记录下新值是多少。

  • 3.$digest遍历完毕之后,就知道那些属性被更改过。再去遍历$scope里面的所有属性(查看有没有新添加的属性,改变不是添加),如果$scope里面更新,会再次去找$watchList循环遍历。直到没有数据更新为止(最多执行10次)

  • 4.调用$apply()更新页面

  • 注意:$digest循环最少要遍历两次

  • 看图


  • 注意:异步操作的时候,需要进行强制$apply()更新页面。

  • 例子:

       //1.创建模板
        var app = angular.module('app', []);
        //2.创建控制器
        app.controller('xmgController', ['$scope','$http','$q', function ($scope,$http,$q) {
           $scope.name = "xmg";
           $scope.age = 10;
           $scope.click = function () {   //触发事件(改变了name属性值,内部进行脏值检测)
               setInterval(function () {
                   $scope.name = "456";    
                   $scope.$apply();
               },1000);               //如果不强制调用$apply()更新页面,那么name是不会改变的 
           }
        }]);
        //3.绑定模块
        //4.绑定控制器
    </script>
<body ng-app="app" ng-controller="xmgController">
    <p>{{name}}</p>
    <button ng-click="click()">点击</button>            
</body>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容