AngularJS中如何自动滚动到底部？

Question

在我的 AngularJS 应用程序中，有一个控制器，其中包含一个带有消息的列表：

$scope.messages = []

该列表会随着应用程序的运行而更新。在模板中，它以以下方式呈现：

<div style="height: 200px; overflow: auto">
...
    <li ng-repeat="msg in messages">{{msg}}</li>
...

但是，当消息数量超过 200 像素高度时，滚动条仍位于顶部。

如何自动滚动到消息列表底部？

Answer 1

这个库https://github.com/Luegg/angularjs-scroll-glue中有一个指令“scroll-glue”可以解决这个问题。

只需将scroll-glue指令添加到div即可：

<div style="height: 200px; overflow: auto" scroll-glue>
...