如何做$ anchorscroll在Angular 1中为一个动态的div（重复元素）

Question

我有一个聊天消息应用程序我正在努力。我有一个div-overflow设置为auto，但问题是，当我运行脚本时，它会向我显示顶部消息，因此每次调用fetch请求时（$ scope.chatRoomMsgs），顶部消息都是所示。我希望每次调用获取请求时滚动到列表的底部。

var app = angular.module("chatApp", ['ngSanitize']);
app.controller('ChatController', function($scope, $http) {

$scope.chatroom_id;
$scope.chatRoomMsgs = function(id) {
    $scope.chatroom_id = id;
    $http.get("readMessages.php?chatroom_id=" + id).success(function(msgs) {
        $scope.chat = msgs;
    });
}
});

这是前端。每个消息都会重复li标记。 Div #messages是容器。

        <div id="messages" class="compressed">
            <ul id="test" ng-repeat="x in chat | filter : {'initial_message':'N'} | orderBy : 'message_id'">
                <li class="{{ x.class }}">
                    <span class="{{ x.status }}">{{ x.sender }}</span>
                    <span class="time">{{ x.timestamp | date : "EEE d MMM h:mm a"}}</span>
                    <br>
                    <span id="message" class="message" ng-bind-html="x.message"></span>
                </li>
            </ul>
        </div>

我对可能包含jquery的不同解决方案持开放态度。

Answer 1

您需要设置包含消息的div的ScrollTop属性

var chatBox = document.getElementById('messages');
chatBox.scrollTop = 300 + 8 + ($scope.chat.length * 240);

类似于这个，我会稍微玩一下这个数字，我没有你正在尝试使用的工作模型，所以数字可能会关闭。

以下是我收到上述代码的帖子的接受答案 - > https://stackoverflow.com/a/26344313/1214743

你可能想看看其他人在做什么，似乎可能有一种更简单的方法来做你想做的事情。

如果我是你，我会谷歌“Angular Chat Scroller”。