我在页面上用 ng-repeat 循环输出了 list，通过点击按钮，我又向 list 中新添加了 10 个元素。这时候，列表的 height 应该变高了，我怎么能立刻获取到这个新的高度哩？
<!doctype html>
<html lang="en" data-ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box {
width: 100px;
height: 300px;
overflow-y: scroll;
}
</style>
</head>
<body>
<p data-ng-controller="ScrollCtrl">
<ul id="box">
<li data-ng-repeat="item in list">{{item}}</li>
</ul>
<button type="button" data-ng-click="add()">Add</button>
</p>
<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('ScrollCtrl', function ($scope) {
$scope.list = [3, 2, 1];
$scope.boxScrollHeight = function () {
var box = angular.element('#box');
return box.get(0).scrollHeight;
};
$scope.add = function () {
console.log('before:', $scope.boxScrollHeight());
var last = $scope.list[0];
for (var i = 1; i <= 10; i++) {
$scope.list.unshift(last + i);
}
console.log('after:', $scope.boxScrollHeight());
};
});
</script>
</body>
</html>点击按钮后，数据应该是立即改变了，但是数据改变到更新 DOM 还有一段时间。控制台输出的 before 和 after 是一样的。也就是获取 after 的高度时 DOM 还没有更新，如何才能获取到增加后的高度？
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
为什么一定要在数据更新完后就取数据？你完全可以先不管他，等你操作视图时在获取数据不就行了。
一般是$apply完成数据到视图的更新。
有时用$digest
$scope.$apply()是触发数据更新，利用 $scope.$watch() 去判断。
注意：不是直接监听数据，第一个参数设置为 function，那么这个 function 会执行多次，总有一次是 DOM 完成更新了执行的。
所以，可以在这个函数里面去做一些事情。
提前记录了一个值：$scope.before，如果后面获取的值和 $scope.before 不相同，说明 DOM 已经更新完毕了，然后就可以做一些操作了。
理解$watch ，$apply 和 $digest --- 理解数据绑定过程
使用$timeout.延迟获取.