ng-repeat渲染并自动滚动到底部

Question

我正在尝试创建一些使用ng-repeat渲染的视图，并且每次添加元素时我希望视图滚动到底部（如在聊天窗口中 - 当添加新消息时滚动视图仍在底部）。

我的观点由3部分组成

<div class="fixed-top">...</div> //header
<div class="content">...</div> //messages - overflow: auto; margin-bottom: 55px;
<div class="fixed-bottom">...</div> //footer - message input

以下是开发工具的截图：

默认情况下它会滚动到顶部，我希望它在ng-repaet完成渲染后滚动到底部 - 如果有新的元素添加到ng-repeat我想再次滚动到底部。

我曾尝试使用$anchorScroll，如此：

$timeout(function() {
  $anchorScroll.hash("last_ng-repeat-id");
  $anchorScroll();
});

它提前解雇，甚至当我尝试点击它仍然没有移动时。

如果没有任何其他人可以解决此问题（首选），是否有任何css解决方案。

谢谢

Answer 1

你可以设置一个指令来运行我不喜欢的end of ng-repeat，或者你可以使用scrollglue https://github.com/Luegg/angularjs-scroll-glue