Angular如何在每个摘要的DOM元素更新后触发回调函数

Question

我想做一个角body-scroll表。为了简单起见，我创建了两个表，其中一个表只有标题，另一个表用于正文。主体表用max-height:300px封装到div中。

当主体表没有滚动条时，两个表对齐，但当主体表有滚动条时，两个表不对齐。我所尝试的是观察主体表的clientWidth，每当它改变时，将新的客户端宽度应用于头表，以便这两个表始终对齐。

在控制器中，我有

$scope.$watch(function() {
    var tbody = $element.find('tbody.sku-table-body');
    return tbody[0].clientWidth;
}, function(newClientWidth) {
    console.log(newClientWidth);
    $scope.tableClientWidth = newClientWidth;
});

然后在header表中添加ng-style="{'width': tableClientWidth}"

问题是watch回调是在angular更新DOM之前调用的。例如，如果最初表中只有10行，并且没有滚动条。这两个表是对齐的。然后我点击一个按钮来加载更多的10条记录，主体表上的滚动条出现了，但是newClientWidth仍然是旧的客户端宽度，因为在angular更新主体表之前调用了watch回调。这两个表现在不对齐了

我需要的是触发一个函数来更新头表宽度每当角完成更新DOM为每个摘要周期。函数可以是像

这样的东西

function(){ var clientWidth= $('.body-table')[0].clientWidth; $('.header-table').width(clientWidth); }

我已经看到$evalAsync和$timeout，看起来他们是一次执行。我想要的是每次在angular完成DOM更新后触发一个函数。

欢迎指教

Answer 1

恐怕你唯一的选择是将$watch与$evalAsync结合起来并手动跟踪最后的宽度，将其与当前进行比较，如果不同则同步。看看这支笔