In previous discussions, I mentioned this directive that I have set up. The goal is to have the user scroll up and then reload data from the backend (simulated in the directive at the bottom). My current issue is what to do with the scrollbar after reloading the data and adding it to the existing array. How can I adjust the scrollbar to position it where the new loaded data begins? Is there a way or concept to achieve this?
(function() {
'use strict';
angular
.module('myProject.common')
.directive('asScrollTop', asScrollTop);
function asScrollTop() {
var directive = {
restrict: 'A',
scope: { chatMessagesOfUser: '=' },
link: link
};
return directive;
////////////
function link(scope, element, attr) {
console.log(element);
element.on('scroll', function() {
if(element[0].scrollTop <= 0) {
for(var i = 0; i < 10; i++) {
var newChatMessage = {};
newChatMessage.color = '#00ff00';
newChatMessage.confirmation = false;
newChatMessage.id = '57b05e24ce861d23bec293df';
newChatMessage.links = null;
newChatMessage.messageBody = 'das ist die neue message';
newChatMessage.messageUserConnectionId = '57b05e24ce861d23bec293e0';
newChatMessage.name = 'Mag. Testname testname';
newChatMessage.read = true;
newChatMessage.time = '13.08.2016 11:23';
newChatMessage.userCreatedMessageId = '"5589929b887dc1fdb501cdba"';
scope.chatMessagesOfUser.splice(0, 0, newChatMessage);
}
scope.$apply();
}
});
}
}
})();