$ionicScrollDelegate.scrollBottom(true); is what I am looking for. But unfortunately, it only fire when I put it inside a ng-click function. When initial load the controller, it seems like does not fire and no scroll action happen. If I try to set delegate-handle=“mainScroll” onto my div as the doc said, it throw a warning: " Delegate for handle “mainScroll” could not find a corresponding element with delegate-handle=“mainScroll”! scrollBottom() was not called!
Possible cause: If you are calling scrollBottom() immediately, and your element with delegate-handle=“mainScroll” is a child of your controller, then your element may not be compiled yet. Put a $timeout around your call to scrollBottom() and try again."
I use the $timeout like that to surround the call like:
$timeout(function(){
$ionicScrollDelegate.$getByHandle('mainScroll').scrollBottom(true);
}, 5000);
It stills do nothing and throw the same error.
So here is my code:
angular.module('cApp').controller('roomCtrl', ['$rootScope', '$scope', '$firebase', 'MyFirebaseService', '$stateParams', '$state', '$ionicScrollDelegate', '$timeout', roomCtrl]);
function roomCtrl($rootScope, $scope, $firebase, MyFirebaseService, $stateParams, $state, $ionicScrollDelegate, $timeout) {
var roomId = $stateParams.id
$ionicScrollDelegate.scrollBottom(true);
MyFirebaseService.checkSession();
$scope.noData = false;
$scope.currentUser = null;
$scope.currentText = null;
$scope.messages = [];
var roomRef = new Firebase($rootScope.baseUrl + "chatrooms/" + roomId);
var messagesRef = roomRef.child('messages');
messagesRef.on('child_added', function(snapshot){
var snapshotVal = snapshot.val();
var timeDisplay = moment(snapshot.val().postTime).fromNow();
$scope.messages.push({
user:snapshotVal.user,
text:snapshotVal.text,
timeDisplay: timeDisplay
});
console.log (snapshotVal);
MyFirebaseService.hide();
$ionicScrollDelegate.$getByHandle('mainScroll').scrollBottom(true);
});
var userAccountRef = new Firebase($rootScope.baseUrl + "users/" + $rootScope.userId);
userAccountRef.on("value", function(snapshot){
var data = snapshot.val();
$scope.currentUser = data.name;
$scope.profileImgUrl = data.profilepic;
$scope.postTime = Date.now();
console.log ($scope.postTime);
$scope.sendMessage = function() {
var newMessage = {
user: $scope.currentUser,
text: $scope.currentText,
postTime: $scope.postTime
};
messagesRef.push(newMessage);
$scope.currentText = null;
};
});
};
When refresh the browser on this page or send message onto Firebase (which call the on function) will fire the scroll to bottom. But initial load (like redirect from other page, go from other page to this page via a menu system) will not fire the scrolling (as you see in my code I called it twices)
