Waiting for DOM to finish rendering in AngularJS

发表于 | | 阅读次数

在AngularJS中directive的link阶段，如果去操作DOM时可能会获取到错误的数据。比如，编写相对视窗固定的组件时，在link阶段可能无法获取到元素的正确初始偏移位置。在这种情形中，只要借助与$timeout，将操作DOM的相关数据加入event loop，等待DOM的渲染完成后即可做后续的操作。

1
2
3
$timeout(function handler() {
	// Handle DOM.
}, 0);

$timeout函数返回一个Promise对象，意味着可以在handler处理完成后执行一些操作。例如，使用一个flag来标记
是否第一个操作：

1
2
3
4
5
6
7
8
var did = false;
var handlePromise = $timeout(function handler() {});
handlePromise.then(function () {
	did = true;
});
// 使用did标记的后续处理

参考：

Run a directive after the DOM has finished rendering

0%