Struggling to implement a chat feature using Angular and Angular Material. The issue lies in getting the md-list to scroll to the very bottom whenever a new message is added to the messages array. Despite trying various solutions, including using watchCollection, I still haven't been able to achieve the desired scrolling behavior. Perhaps there's something specific to Angular Material that I'm missing.
Here's the HTML snippet:
<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">
<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>
And here's the Angular Directive code:
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;
}
});
}
}
})