Scroll to bottom when new md-list-item is added to the md-list Angular Material

Question

I'm implementing a chat using Angular and Angular Material and Im stuck at making the md-list scroll at the very bottom when i modify the model with new message in messages array. Tried many things but with no success watchCollection is working but i cant seem to find the way to scroll to the md-list at the very bottom. Maybe its something with the material

HTML:

<md-content flex layout-padding>
        <md-list flex scroll-bottom="vm.messages">
            <md-list-item class="md-3-line" ng-repeat="msg in vm.messages">
                <!--<img ng-src="{{user.userAvatar}}" class="md-avatar" alt="{{user.userName}} Avatar"/>-->
                <div class="md-list-item-text" layout="row">
                    <div flex="15"></div>
                    <div flex="70" layout="column">
                        <h3>{{msg.text}}</h3>
                    </div>
                    <div flex></div>
                </div>
            </md-list-item>
        </md-list>
    </md-content>

Angular Directive:

angular.module('chat').directive('scrollBottom', function ($timeout) {
    return {
        restrict: 'A',
        scope: {
            scrollBottom: "<"
        },
        link: function (scope, element) {
            scope.$watchCollection('scrollBottom', function (newValue) {
                if (newValue)
                {
                    element.scrollTop =  element.scrollHeight;
                }
            });
        }
    }
})

Answer 1

当我发表评论时，以这个SO问题作为参考，此处的关键是将您的scrollBottom指令添加到md-content元素而不是md-list 。