有没有一种方法可以在Angular中立即检测回流，而不使用$timeout

Question

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

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

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

此代码将工作，但在移除滚动条的回流之后不会发生$digest；当我删除绘图时会调用$digest，但我想回流会在稍后发生。

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

Answer 1

您可以使用突变观测器来检测DOM中的更改。当发生更改时，您将收到通知，并可以遍历查看更改内容。

使用示例（来源）：

// 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();

有关详细信息，请参阅源链接。

它应该在包括IE11在内的所有主要浏览器中都得到支持。对于[IE9，IE11>，存在可以使用的polyfill。

规范