为什么更改数据的时候,页面上的东西就会跟着更改?
-
脏值检测是原理性的东西。(内部实现)
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>