在div元素angularjs聊天结束时移动滚动条

Question

我有一个包含消息的消息容器块。如何将滚动条移动到此div的底部？我有一个指令将它移到底部，但它无法正常工作。

模板：

<div class="message-area scroll default always-visible" scroll-bottom="$ctrl.allMessages">
        <div class="container-column-fluid">
            <message-container ng-repeat="message in $ctrl.allMessages" message="message"></message-container>
        </div>
    </div>

指令：

function scrollBottom() {
    return {
        scope: {
            scrollBottom: "<"
        },
        restrict: 'A',
        link: function(scope, element, attr) {
            scope.$watchCollection('scrollBottom', function(newVal) {
                if (newVal) {
                    $timeout(function() {
                        element[0].scrollTop =  element[0].scrollHeight;
                    }, 0);
                }

            });
        }
    };
}

export { scrollBottom };

Answer 1

哦，我忘了在功能中插入$ timeout ...全天工作......

function scrollBottom($timeout) {
    return {
        scope: {
            scrollBottom: "<"
        },
        restrict: 'A',
        link: function(scope, element, attr) {
            scope.$watchCollection('scrollBottom', function(newVal) {
                if (newVal) {
                    $timeout(function() {
                        element[0].scrollTop =  element[0].scrollHeight;
                    }, 0);
                }

            });
        }
    };
}

export { scrollBottom };