有没有一种方法可以在不使用 $timeout 的情况下在 Angular 中立即检测回流？

Question

我正在一个网站上工作，该网站具有用于绘制数据的可滚动画布列表，并且每当 div 画布的宽度发生变化时，我都需要调整画布的大小。

我在大多数情况下都可以使用它，但是如果我删除了一个使滚动条消失的图，它就不起作用了。我尝试了以下方法，其中 plotsScroller 是带有滚动条的 div，而 plotsList 是其中的内容：

    $scope.isScrollingPlotsList = function() {
        return plotsList.offsetHeight > plotsScroller.offsetHeight;
    }

    $scope.$watch('isScrollingPlotsList()', $scope.$apply);

这段代码可以工作除了没有$digest发生在删除滚动条的回流之后； $digest 在我删除情节时被调用，但我想回流发生在稍后。

有谁知道如何在不使用 $timeout 的情况下检测回流？

Answer 1

您可以使用 Mutation Observers 检测 DOM 中的变化。当发生变化时，您会收到通知，并且可以遍历以查看发生了什么变化。

用法示例(source):

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

// later, you can stop observing
observer.disconnect();

有关详细信息，请参阅来源 link。

所有主流浏览器都应该支持它，包括。 IE11。对于 [IE9, IE11> 存在一个 polyfill 可以使用。

The specification

有没有一种方法可以在不使用 $timeout 的情况下在 Angular 中立即检测回流？

Is there a way to detect reflows instantly in Angular, without using $timeout?

html

angularjs

canvas

scrollbar

reflow